بنقرة واحدة
ui-design
UI设计 — 页面布局、组件规范、交互流程、组件目录维护。当需要做 UI 设计、定义设计 token、规划页面与组件、设计交互流程或维护组件目录时使用。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
القائمة
UI设计 — 页面布局、组件规范、交互流程、组件目录维护。当需要做 UI 设计、定义设计 token、规划页面与组件、设计交互流程或维护组件目录时使用。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
项目走查 — 在隔离沙盒中以指定执行模式(缺省 standard 全阶段)把一个小型示例项目跑通整条 SDLC 工作流(初始化→核心执行链路→分支→异常→终止清理),逐路径观察各阶段/门禁/降级/恢复的真实行为,产出『框架本身 + 走查流程本身』两类改进建议,并把走查流程自身的改进经自更新协议回灌本 skill 迭代。与 framework-review 形成动静对偶:后者静态审元资产,本 skill 动态端到端自测。当用户想验证一次框架部署是否真能跑通、为非 Claude-Code 平台做行为级冒烟、或自测 workflow-framework-generator 生成的框架时使用。
测试 — 测试策略规划、测试编写与执行、覆盖率分析、缺陷记录。当需要规划测试策略、编写或执行测试套件、分析覆盖率或记录缺陷时使用。本 skill 不改源码(缺陷修复由 debug 负责),单任务 RED/GREEN 单元测试由 tdd-engine 负责,testing 聚焦集成/E2E 与覆盖盲区补充。
代码评审 — 任务粒度评审 (review) 与项目级健康度扫描 (scan) 双入口;代码质量检查、规范合规验证、安全漏洞检测、腐化指标扫描。当任务卡 GREEN 完成 / Sprint 发布前 / 用户要求扫描代码腐化时使用此 skill。审查范围限 src/ 业务代码:文档审查由 doc-review 负责;框架元资产 (.cataforge/) 审查由 framework-review 负责;Sprint 完成度由 sprint-review 负责。
统一上下文 I/O — 按需读取章节/实体、查询追溯关系、生成与写入、门禁校验。文档生命周期的单一入口;后端(知识图谱/文件)由框架按配置方案透明路由,调用方只表达意图。按操作分支见 references/。
功能走查 — 对交付项目的功能实现做验收式动态走查,两层正交判定:①功能是否兑现 spec(missing/drift/bug/pass);②代码本身是否健康(复用 COMMON-RULES §统一问题分类体系的 code category)。用真实数据路径起真实服务复现,专捞门禁全绿仍漏的跨模块集成缝隙。当项目功能交付后需验收、Sprint 发布前做功能级复核、或用户要求走查某功能域时使用。与 framework-walkthrough 动静对偶:后者在沙盒自测框架 SDLC,本 skill 验收交付项目的功能实现。
框架元资产审查 — 对 .cataforge/ 下的 agents/skills/hooks/rules + workflow 拓扑做内容质量与一致性审查。与 platform-audit 形成内审/外审对偶;与 code-review/doc-review 服务于业务产物不同,本 skill 专审框架自身配置。当用户提到框架腐化、SKILL.md/AGENT.md 质量、agent 引用孤立、SKILL/MANIFEST 漂移、Workflow 完整性、model_tier 合规时使用。
| name | ui-design |
| description | UI设计 — 页面布局、组件规范、交互流程、组件目录维护。当需要做 UI 设计、定义设计 token、规划页面与组件、设计交互流程或维护组件目录时使用。 |
| argument-hint | <prd文档路径或功能需求ID> |
| suggested-tools | file_read, file_write, file_edit, shell_exec |
| depends | ["context","research","design-grill"] |
| disable-model-invocation | false |
| user-invocable | true |
触发与启用协议见 design-grill §启用门(项目偏好或阶段入口一次询问;询问不等于启用,用户明确接受后调用 design-grill ui [范围])。未启用即以 research user-interview 做普通澄清。design_tool=penpot 时仍先遵守既有 Design-Tool Capability Gate;总结返回后再进入 Step 1,Token 同步仍由本 skill 正式流程处理。
理解产品上下文,确立设计方向:
基于Step 1确立的设计方向定义Token,每个Token选择须有设计意图:
色彩体系:
排版体系:
间距与圆角:
若 {INSTRUCTION_FILE} 设计工具 为 penpot,调用 penpot-bridge sync(emit / mirror 语义见其 §sync)
从PRD功能需求推导页面和组件需求:
为每个组件定义完整规范:
为每个页面定义布局: