메뉴
创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
为深度学习模型、网络架构、算法流程等生成标准 Draw.io (.drawio) 格式的可视化图表；支持从零生成与风格迁移两种模式。从零生成：模型架构图、流程图、感受野示意图等；风格迁移：参考图 + 内容描述/项目 → 按参考图风格生成新图。确保 XML 格式正确，可直接在 Draw.io 中打开编辑。
本科与硕士学位论文全流程撰写辅助。支持大纲审核（理工科/文科）、结构仿写（通用/实验/绪论/摘要；文科含文献综述、案例分析、对策建议、文科绪论与摘要）、参考文献获取、融合、润色（含实验章节/文科章节）、缩写、扩写、防 AIGC、中英互译、结构化信息提取。当用户提到论文撰写、大纲审核、论文章节仿写、参考文献、论文润色、防 AIGC、论文翻译、文科论文、文献综述、对策建议时使用。
基于用户提供的技术方案、草稿或参考专利，生成、改写与统稿中文发明专利的题目、摘要、背景技术、发明内容、权利要求、附图说明和具体实施方式。用于专利撰写、专利摘要、权利要求、说明书、专利润色、专利仿写、参考专利蒸馏等场景。
开发流程五步法。支持需求理解、方案设计、代码实现、代码审查、Bug 修复。当用户提到「需求分析」「方案设计」「代码实现」「代码审查」「理解需求」「技术设计」「开始写代码」「Review」「检查代码」「bug」「报错」「崩溃」「异常」「出错了」时使用。
公众号/自媒体全流程。根据用户表述自动匹配：撰写文章、封面图、正文插图、风格提取。支持多种写作风格。当用户提到写公众号、技术博客、公众号封面、正文插图、步骤图、演示图、流程示意、分析写作风格、克隆文风、模仿爆款、提取风格时使用。详见 reference 目录。
基于文字说明或结构信息，生成可直接在 Excalidraw 中打开的手绘风 `.excalidraw` 图表；支持系统架构图、流程图、数据结构图与自由白板草图，输出标准 Excalidraw JSON。
| name | frontend-design |
| description | 创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。 |
| license | Complete terms in LICENSE.txt |
本技能指导创建独具一格、可交付生产的前端界面，规避千篇一律的「AI 感」审美。在实现可运行代码的同时，对美学细节与创意选择给予充分关注。
用户会提供前端需求：要做的组件、页面、应用或界面，可能附带使用场景、目标用户或技术约束。
动手写代码前，先理解上下文并选定一个明确、大胆的美学方向：
关键：选定清晰的概念方向并精准执行。大胆的繁复与克制的极简都成立——核心是有意图，而不是单纯「够猛」或「够淡」。
在此基础上，用可运行代码（HTML/CSS/JS、Vue、React等）实现：
重点把握以下维度：
prefers-reduced-motion 媒体查询为「减少动效」用户提供静态或简化动效，不强制观看动画。不要使用以下套路：
要在理解需求的基础上做有创意的解读，做出让人感觉「是为这个场景专门设计」的选择。每次设计都应有差异：明/暗主题、字体、风格都可以变化，不要反复收敛到同一套常见组合（例如 Space Grotesk 等）。
重要：实现量要和美学目标匹配。
优雅来自把选定的方向执行到位，而不是堆砌效果。
:focus / :focus-visible 等。动效部分务必考虑 prefers-reduced-motion，避免强制动画。
在明确目的与调性的前提下，用大胆、一致、有记忆点的视觉与交互实现生产级前端。留白、层次、动效与可访问性共同支撑「既好看又好用」的界面。敢于做非常规选择，把一次设计做到让人过目不忘。