Agent Skills
› KunAgent/Kun
› component-design
component-design
GitHub指导为Kun组件应用一致的视觉系统、响应式行为、交互状态及无障碍设计。涵盖从定义层级、选择Token到实现多种状态及验证对比度和可访问性的完整工作流，确保交付高质量的前端UI组件。
触发场景
需要设计或优化前端组件的视觉和交互
检查组件是否符合设计系统和无障碍标准
安装
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
