メニュー
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/linxuan-sys/opencode-skills-chinese --skill frontend-designコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
任何时候只要涉及.pptx文件——无论是作为输入、输出还是两者兼有——就使用此技能。这包括：创建幻灯片、推介文件或演示文稿；读取、解析或提取任何.pptx文件中的文本（即使提取的内容将用于其他地方，比如邮件或摘要）；编辑、修改或更新现有演示文稿；合并或拆分幻灯片文件；处理模板、布局、演讲者备注或注释。只要用户提到"deck"、"slides"、"presentation"或引用.pptx文件名，无论他们后续打算如何处理内容，都要触发此技能。如果需要打开、创建或处理.pptx文件，使用此技能。
使用p5.js创建带有种子随机和交互式参数探索的算法艺术。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创建原创算法艺术，而不是复制现有艺术家的作品，以避免侵犯版权。
引导用户完成结构化的文档协作工作流程。当用户想要编写文档、提案、技术规范、决策文档或类似结构化内容时使用。此工作流程帮助用户高效地传递上下文、通过迭代优化内容，并验证文档对读者是否有效。当用户提到编写文档、创建提案、起草规范或类似文档任务时触发。
| name | frontend-design |
| description | 创建独具特色、生产级别的高质量前端界面。当用户要求构建Web组件、页面或应用，且视觉效果与代码质量同等重要时使用。 |
| origin | ECC |
当任务不只是"让它能运行"而是"让它看起来有设计感"时使用本技能。
本技能适用于产品页面、仪表盘、应用外壳、组件或视觉系统，这些场景需要清晰的设计理念而非通用的AI风格UI。
选定一个方向并坚持执行。
安全平庸的UI通常比有少数大胆选择的强统一审美效果更差。
在编码前确定：
可选方向：
不要随意混合风格。选择一种并干净利落地落地。
定义：
使用CSS变量或项目的token系统，确保界面在迭代过程中保持一致性。
优先选择：
除非明确适配，不要默认使用对称卡片网格。
使用动画实现：
不要到处散落通用的微交互。一个精心设计的加载序列通常比二十个随机悬停效果更好。
使用氛围感元素：
对于面向产品的页面，空白的纯色背景很少是最优选择。
永远不要默认使用：
交付前确认：