frontend-design

Name: frontend-design
Author: majesticlabs-dev

github.com/majesticlabs-dev设计与 UI50162 次安装7 周前更新

代码仓库

关于 frontend-design

frontend-design 是面向多种框架开发者的技能，用于构建可用于生产环境的 Web 界面。它会按设计与实现需求引导至专门技能和参考资料。

主要功能

01将设计任务分派给专门技能
02解析 DESIGN.md 设计令牌
03提供 React 和 Vue 模式
04涵盖 Rails 与 Hotwire 模式
05提供无障碍与验证指导

适用场景

01将项目设计令牌用于界面
02为 Web 项目确定视觉方向
03在 React 或 Vue 中实现动效
04检查界面的无障碍性与响应式表现

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill frontend-design

安装后在 Claude Code 中输入/frontend-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

css-polish-tips.md

design-md-format.md

landing-page-design.md

motion-patterns.md

rails-hotwire.md

react-vue.md

ui-implementation-guide.md

web-interface-standards.md

详细介绍

前端设计

用于创建独具特色、可投入生产的界面的编排器。

技能路由

根据需求调用专用技能：

需求	技能	内容
设计令牌	参阅 `references/design-md-format.md`	DESIGN.md 令牌解析、导出
设计方向	`frontend-design-philosophy`	极致美学、反模式
CSS 实现	`frontend-css-patterns`	排版、颜色、动效、空间
React/Vue 模式	参阅 `references/react-vue.md`	Framer Motion、Vue Transitions
Rails/Hotwire	参阅 `references/rails-hotwire.md`	ViewComponent、Stimulus

框架资源

React/Vue

参阅 references/react-vue.md，了解：

Framer Motion 错落动画
Vue Transition/TransitionGroup 模式
使用设计令牌的组件架构

Rails/Hotwire

参阅 references/rails-hotwire.md，了解：

带有配套样式的 ViewComponent
Stimulus 显示/切换控制器
带动画的 Turbo Frames 和 Streams
使用 content_for 的 ERB 布局模式
CSS 设计令牌和导入顺序

实现资源

资源	内容
ui-implementation-guide.md	排版规则、颜色、表单、按钮、表格
motion-patterns.md	页面加载、滚动触发、悬停、性能
css-polish-tips.md	无障碍、滚动、焦点、防御性 CSS
landing-page-design.md	区块设计、配色方案、排版搭配

工作流

1. Check for design tokens
   - Look for DESIGN.md in project root
   - If found: parse tokens, use as source of truth for colors, typography, spacing
   - See references/design-md-format.md for format details

2. Clarify design direction
   - Invoke `frontend-design-philosophy` for aesthetic guidance
   - User picks: brutalist, minimalist, luxury, playful, etc.

3. Implement CSS foundation
   - Invoke `frontend-css-patterns` for typography, color, motion
   - If DESIGN.md tokens exist: map tokens to CSS variables or Tailwind theme
   - Otherwise: customize Tailwind or write CSS variables

4. Apply framework patterns
   - React/Vue: Use references/react-vue.md
   - Rails/Hotwire: Use references/rails-hotwire.md

5. Polish and validate
   - Use references/css-polish-tips.md for accessibility
   - Use references/motion-patterns.md for animation
   - Run validation checklist from philosophy skill

快速参考

Web 界面标准

参阅 references/web-interface-standards.md，了解：

键盘操作要求（WAI-ARIA 组件模式）
触控目标尺寸（移动端 44px，桌面端 24px）
表单行为（按 Enter 提交、自动完成、移动键盘）
动画无障碍（prefers-reduced-motion）
网络性能预算（POST < 500ms，虚拟化阈值）

验证清单：

独具特色的排版（非默认字体）
有意选择且数量有限的配色方案
布局打破可预测的模式
动效服务于实际目的
设计方向明确
保持响应式体验质量
保留无障碍特性

支持 Markdown

登录后评论