# Generate UI

> 在当前仓库内生成或修改前端 UI 时使用。适用于新增页面、组件、静态界面、活动页、看板、表单区块或视觉结构调整等场景，要求优先直接完成界面代码，并保持最小改动；生成完成后不要主动启动本地预览，也不要使用内置浏览器检查实际排版，除非用户明确要求。

- Skill: `ls1072502993/generate-ui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add ls1072502993/generate-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ls1072502993/generate-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ls1072502993 (https://skillmd.com/u/ls1072502993)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/ls1072502993/generate-ui

---


# UI 生成规则

## 规则执行方式（强制）

- 本 skill 一旦命中，本文件中的全部规则、流程、检查和交付条件默认全部执行，不得自行挑选或只执行部分内容。
- 仅允许跳过规则正文明确限定且当前条件不成立的条款；不得因改动小、只读文件、只回答问题或只执行命令而跳过已命中的规则。
- 多个 skill 同时命中时，叠加执行全部相关规则；交付前逐条确认已落实，未完成时不得宣告任务完成。

## 执行目标

- 直接完成用户要求的 UI 代码与必要样式。
- 保持最小改动，不顺手扩展交互、数据流或工程配置。

## 必须遵守

- 开始生成或修改 UI 前，先确认当前任务涉及的页面、组件、模块边界。
- 优先复用仓库内已有组件、结构、命名和样式组织方式。
- 聚焦界面结构、必要样式和当前任务明确要求的交互，不额外扩展数据流、工程配置或无关页面改造。
- 用户没有明确要求联调、运行、截图或验收时，只交付代码改动。
- 生成完成后，不主动启动本地预览，不主动运行开发服务，也不使用内置浏览器检查实际排版。

## 执行提醒

- 除 UI 专属规则外，其余执行习惯继续遵循 `frontend-global`。
- 如果任务同时涉及 Vue、SCSS、接口消费等内容，继续叠加对应 skill 约束。
- 如果用户明确要求预览、截图、联调或排查运行时样式问题，再进入本地运行和浏览器检查流程。