fronted-design について
情報設計やビジュアルルール、インタラクション状態、最終確認までを扱う UI 実装向けの Cursor スキルです。新規ページの作成や、ビジネスロジックを変えない体験改善に適しています。
主な機能
- 01ページ目標と成功基準の明確化
- 02レイアウトと情報階層の設計
- 03ビジュアルルールと状態の定義
- 04レスポンシブ性・アクセシビリティ・性能の確認
活用シーン
- 01要件に沿った UI の実装
- 02視覚的階層と一貫性の改善
- 03ビジネスロジックを変えない体験改善
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/fronted-designを入力して読み込まれたか確認します。
詳細
プロジェクトの README より权威入口
.cursor/skills/fronted-design/SKILL.md- 可配合：
.cursor/skills/visual-design-foundations/SKILL.md - 可配合：
.cursor/skills/interaction-design/SKILL.md
适用场景
- 从需求到页面落地的 UI 实现任务。
- 需要提升现有界面的视觉层级与一致性。
- 需要在不改业务逻辑前提下优化体验。
非适用场景
- 不用于替代业务接口设计或数据库建模。
- 不用于无依据的大改风格（需与品牌/产品目标一致）。
执行步骤
- 明确页面目标、核心用户任务与成功标准。
- 设计结构层级：布局、信息密度、主要操作路径。
- 定义视觉规则：颜色、字体、间距、状态反馈。
- 补全交互细节：hover/focus/loading/empty/error。
- 交付前检查响应式、可访问性与性能边界。
常见陷阱
- 只改样式不改信息层级，导致可用性仍差。
- 动效过多影响主任务与页面性能。
- 忽略空态与错误态，导致体验断层。
コメント
Markdown 対応