用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt;运行前请先检查来源。
npx skills add https://github.com/linxuan-sys/opencode-skills-chinese --skill frontend-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地?可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | frontend-design |
| description | 创建独具特色、生产级别的高质量前端界面。当用户要求构建Web组件、页面或应用,且视觉效果与代码质量同等重要时使用。 |
| origin | ECC |
当任务不只是"让它能运行"而是"让它看起来有设计感"时使用本技能。
本技能适用于产品页面、仪表盘、应用外壳、组件或视觉系统,这些场景需要清晰的设计理念而非通用的AI风格UI。
选定一个方向并坚持执行。
安全平庸的UI通常比有少数大胆选择的强统一审美效果更差。
在编码前确定:
可选方向:
不要随意混合风格。选择一种并干净利落地落地。
定义:
使用CSS变量或项目的token系统,确保界面在迭代过程中保持一致性。
优先选择:
除非明确适配,不要默认使用对称卡片网格。
使用动画实现:
不要到处散落通用的微交互。一个精心设计的加载序列通常比二十个随机悬停效果更好。
使用氛围感元素:
对于面向产品的页面,空白的纯色背景很少是最优选择。
永远不要默认使用:
交付前确认: