·design-system

design-system

Name: design-system
Author: akillness

✓

akillness/skills-templateGitHub: akillness/skills-template 来源: akillness/skills-template

使用清晰的设计标记、布局规则、运动指导和可访问性检查来生成生产级 UI 设计，以实现一致、可扩展的前端开发。

akillness·design·system

17安装·0热度·@akillness

安装

GitHub: akillness/skills-template

$npx skills add https://github.com/akillness/skills-template --skill design-system

如何安装 design-system

通过命令行快速安装 design-system AI 技能到你的开发环境

打开终端: 打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等）
运行安装命令: 复制并运行以下命令：npx skills add https://github.com/akillness/skills-template --skill design-system
验证安装: 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用

来源：akillness/skills-template。

SKILL.md

查看原文

This is a skill for production-grade UI design. It supports consistent and scalable frontend development through clear design tokens, layout rules, motion guidelines, and accessibility checks.

Issue: UI feels generic Cause: No visual direction or tokens Solution: Provide style references and palette

Issue: Layout breaks on mobile Cause: No responsive grid rules Solution: Define breakpoints and stacking behavior

使用清晰的设计标记、布局规则、运动指导和可访问性检查来生成生产级 UI 设计，以实现一致、可扩展的前端开发。来源：akillness/skills-template。

可引用信息

为搜索与 AI 引用准备的稳定字段与命令。

安装命令: npx skills add https://github.com/akillness/skills-template --skill design-system
来源: akillness/skills-template
分类: *创意媒体
认证: ✓
收录时间: 2026-03-09
更新时间: 2026-03-11
链接: https://www.learn-skills.dev/zh/skills/akillness/skills-template/design-system

Browse more skills from akillness/skills-template

快速解答

什么是 design-system？

使用清晰的设计标记、布局规则、运动指导和可访问性检查来生成生产级 UI 设计，以实现一致、可扩展的前端开发。来源：akillness/skills-template。

如何安装 design-system？

打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等）复制并运行以下命令：npx skills add https://github.com/akillness/skills-template --skill design-system 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用

这个 Skill 的源码在哪？

https://github.com/akillness/skills-template

详情

分类: *创意媒体
来源: skills.sh
收录时间: 2026-03-09