Agent Skills
› KunAgent/Kun
› component-design
component-design
GitHub指导为Kun组件应用一致的视觉系统、响应式行为、交互状态及无障碍特性，涵盖从设计令牌到原型发布的完整工作流。
触发场景
需要设计或优化前端组件的视觉与交互体验
要求确保组件的响应式布局和无障碍合规性
安装
npx skills add KunAgent/Kun --skill component-design -g -y
SKILL.md
Frontmatter
{
"name": "component-design",
"description": "Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components."
}
Component Design
Copyright (c) 2026 KunAgent. Licensed under the MIT License.
Purpose
Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.
Tool routing
| Tool or skill | Use |
|---|---|
design_system |
Create or apply project design tokens. |
design_validate |
Validate design-system usage. |
design_component |
Publish the component prototype. |
generate_image |
Create a needed local visual asset. |
Workflow
- Define hierarchy, content density, primary action, and states.
- Choose type, spacing, color, radius, and motion tokens before styling details.
- Design mobile and desktop layouts intentionally.
- Implement hover, focus, active, disabled, loading, empty, success, and error states as relevant.
- Validate contrast, semantics, motion, and responsiveness.
Completion gates
- Use one focal point and avoid nested-card clutter.
- Use color as reinforcement, not the only signal.
- Keep remote resource policy least-privilege.
Boundaries
- Do not depend on undocumented host CSS or runtime globals.
- Do not hide essential text in imagery or animation.
Delivery
Lead with the outcome, name the evidence used for verification, and disclose any real limitation that remains.
版本历史
- a984912 当前 2026-09-09 01:49
