メニュー
Use when the task is to convert a feature requirements document into a text-only frontend design specification with a complete page list, detailed per-page layout, UI, UX, colors, styling, and minimal copy that developers can implement directly.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | frontend-design-spec |
| description | Use when the task is to convert a feature requirements document into a text-only frontend design specification with a complete page list, detailed per-page layout, UI, UX, colors, styling, and minimal copy that developers can implement directly. |
在当前任务是“把功能需求文档转换成可直接指导前端开发的设计说明文档”时使用这个 skill。
适用范围：
不适用范围：
产出的文档必须写入 .dev/frontend_design_doc.md，并且让后续开发在没有设计图的情况下，也能按照文字说明完成页面实现，尽量减少二义性。
文档必须满足：
假设，不要把假设混进确定性描述里。.dev/frontend_design_doc.md。.dev/frontend_design_doc.md。输出文档建议使用下面的结构：
必须包含：
整体视觉方向
说明界面的气质、密度、节奏和内容呈现方式，用具体词描述，例如“浅底、高留白、信息块分层明显、主操作高对比”。色彩系统
至少给出：
字体与文字层级
说明页面标题、区块标题、正文、说明文字、按钮文字的大致层级关系。圆角与阴影
明确不同层级容器、按钮、输入框、弹层的圆角和阴影风格。间距系统
说明页面外边距、区块间距、模块内间距和栅格倾向。交互反馈规则
说明 hover、active、focus、disabled、loading、success、error 的视觉反馈。先列出完整页面清单，每个页面至少写清：
每个页面必须单独展开，使用下面结构：
按照从上到下、从左到右的顺序描述每个区域。每个区域至少写清：
按需覆盖：
至少写清：
完成后自检：
.dev/frontend_design_doc.mdUse for building and operating Ignis projects with ignis-cli, ignis-sdk, ignis.hcl, SQLite, async jobs, cron schedules, platform object-store presign, service build/publish/deploy, and example-driven project setup.
Multi-agent web development workflow. Use when a web app should be delivered through four required subagents for PRD, frontend design, code development, and review, with Ignis backend/deploy and a Vue 3 plus Vite frontend stack.
Manager for web-page work. Continuously orchestrate planner, builder, and evaluator roles by reading `agents/*.md` and launching generic subagents until the shared artifacts show the work is complete.
Use when the task is to analyze a feature request or requirements document and write a concise, product-facing PRD to .dev/prd_doc.md covering only core features, page structure, user interaction logic, color direction, UI, UX, and assumptions.
Use for implementing or repairing the Vue frontend of a web app with Vue 3, Vite, vue-router, Pinia, vue-i18n, Tailwind CSS v4.
Use for Ignis login integration with services. Covers [services.ignis_login], IgnisCloud ID hosted login, google and test_password providers, PKCE, callback flows, and login smoke tests.