Menu
创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
为深度学习模型、网络架构、算法流程等生成标准 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，避免强制动画。
在明确目的与调性的前提下，用大胆、一致、有记忆点的视觉与交互实现生产级前端。留白、层次、动效与可访问性共同支撑「既好看又好用」的界面。敢于做非常规选择，把一次设计做到让人过目不忘。