EDIC (Editorial Design Interface for Content) is a framework-agnostic design system that produces warm, restrained, typographically refined interfaces — built on OKLch color science and a comprehensive token architecture.
It ships as three static files: styles.css, scripts.js, and tokens.json. No build step. No runtime dependencies. Drop them in and it works for React, Vue, plain HTML, and print; email and rich text can be adapted to compatible static styles.
It is built to be machine-readable by AI agents. A Claude Code Skill package, structured prompts, and a references/ directory of on-demand component examples let AI agents generate more consistent output from a clear EDIC rule set.
| Design tokens | 318 structured entries — color, typography, spacing, radius, shadow, motion |
| Components | 44 core component families, token-based dark mode |
| Icons | 209 SVG symbols, 1.5px stroke, aria-hidden |
| Color system | OKLch-only — perceptually uniform, no hex/rgb guesswork |
| Dark mode | [data-theme="dark"] + prefers-color-scheme media query |
| CJK support | Noto Sans/Serif SC, full-width punctuation, optimized tracking |
| AI integration | Claude Code Skill · Cursor rules · Kiro steering · Copilot instructions |
| Engineering | 15 CI validators, release-please automation, pre-commit hooks |
<!doctype html>
<html lang="en" data-theme="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="ds-btn ds-btn--primary">Get started</button>
<script src="scripts.js"></script>
</body>
</html>Full component reference → edic.cgartlab.com/docs.html
Install the Skill once; every subsequent prompt produces token-driven, accessible, dark-mode-ready output automatically.
Claude Code
mkdir -p .claude/skills/edic-design-system
# Unzip the Skill package from the Downloads page into this directoryCursor / GitHub Copilot / Kiro — see prompts.html for platform-specific setup.
Any LLM — paste the system prompt from prompts.html into your Custom Instructions.
Skill package: skills/edic-design-system/ · Downloads: edic.cgartlab.com/downloads.html
styles.css — tokens, components, dark mode, animations
scripts.js — icons, theme toggle, scroll reveal, copy
tokens.json — structured token data (machine-readable)
index.html — homepage
docs.html — component catalog + usage guide
prompts.html — AI prompts & Skill package
downloads.html — PDFs, token exports, brand assets
blog.html — article layout with TOC
company.html — company landing page
resume.html — printable A4 résumé
report.html — multi-page report layout
skills/edic-design-system/ — Claude Code Skill (SKILL.md + references/)
prompts/ — system-prompt.md, quick-prompt.md
tools/ — 15 Python validators
scripts/ — build.py, lint.py, dev.sh, pre-commit.sh
docs/ — VERSIONING, COMPONENT-DEVELOPMENT, TESTING, RELEASE-CHECKLIST
make serve # http://localhost:8000
make lint # all 15 validators (one command)
make build # lint → stamp → icons → PDFs → Skill ZIP
make validate # validators individually, with exit-code summaryCI runs on every PR and push. All blocking validators must pass before merge.
The repository is configured for GitHub Pages out of the box (CNAME, .nojekyll).
- Settings → Pages — Source: branch
main, directory/. - DNS — Add a CNAME record pointing to
cgartlab.github.io. - Visit edic.cgartlab.com once the certificate provisions.
CC BY 4.0 — free to use, modify, and redistribute with attribution.
EDIC（Editorial Design Interface for Content，内容编辑设计界面）是一套框架无关的设计系统，基于 OKLch 色彩科学和完整的令牌体系，输出温润克制、排版精良的界面。
它只有三个静态文件：styles.css、scripts.js 和 tokens.json。无需构建步骤，无运行时依赖。放进项目即可用于 React、Vue、原生 HTML 与打印输出；邮件和富文本可转为兼容静态样式。
它也以机器可读方式面向 AI Agent 构建。 Claude Code Skill 包、结构化提示词，以及包含按需加载组件示例的 references/ 目录，让 AI Agent 可以依据清晰规则生成更一致的 EDIC 界面。
| 设计令牌 | 318 条结构化条目 — 颜色、字体、间距、圆角、阴影、动效 |
| 组件 | 44 个核心组件家族，暗色令牌覆盖 |
| 图标 | 209 个 SVG 符号，1.5px 描边，aria-hidden |
| 色彩系统 | 纯 OKLch — 感知均匀，告别 hex/rgb 猜测 |
| 暗色模式 | [data-theme="dark"] + prefers-color-scheme 媒体查询 |
| 中文支持 | Noto Sans/Serif SC，全角标点，优化字距 |
| AI 集成 | Claude Code Skill · Cursor 规则 · Kiro Steering · Copilot 指令 |
| 工程治理 | 15 个 CI 验证器，release-please 自动化，pre-commit 钩子 |
<!doctype html>
<html lang="zh-CN" data-theme="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="ds-btn ds-btn--primary">开始使用</button>
<script src="scripts.js"></script>
</body>
</html>完整组件用法与视觉手册 → edic.cgartlab.com/docs.html
安装一次 Skill，后续提示词会携带 EDIC 的令牌、组件、暗色模式和可访问性规则，帮助 Agent 生成更一致的代码。
Claude Code
mkdir -p .claude/skills/edic-design-system
# 从下载页解压 Skill 包到此目录Cursor / GitHub Copilot / Kiro — 见 prompts.html 各平台安装说明。
任意 LLM — 将系统提示词粘贴到 Custom Instructions 中即可。
Skill 包：skills/edic-design-system/ · 下载：edic.cgartlab.com/downloads.html
styles.css — 令牌、组件、暗色模式、动效
scripts.js — 图标、主题切换、滚动揭示、复制
tokens.json — 结构化令牌数据（机器可读）
index.html — 首页
docs.html — 使用文档 + 视觉手册
prompts.html — AI 提示词与 Skill 包
downloads.html — PDF 参考、令牌导出、品牌资产
blog.html — 带目录的文章页布局
company.html — 企业官网布局
resume.html — A4 可打印简历
report.html — 多页报告布局
skills/edic-design-system/ — Claude Code Skill（SKILL.md + references/）
prompts/ — system-prompt.md、quick-prompt.md
tools/ — 15 个 Python 验证器
scripts/ — build.py、lint.py、dev.sh、pre-commit.sh
docs/ — 版本管理、组件开发、测试、发布清单
make serve # http://localhost:8000
make lint # 全部 15 个验证器（一条命令）
make build # 校验 → 版本戳 → 图标 → PDF → Skill ZIP
make validate # 逐一运行验证器，输出退出码汇总每次 PR 和推送都会触发 CI，所有阻塞性验证器通过后才允许合并。
仓库已预配置 GitHub Pages（CNAME、.nojekyll）。
- Settings → Pages — 来源：
main分支，目录/。 - DNS — 添加 CNAME 记录指向
cgartlab.github.io。 - 证书签发后访问 edic.cgartlab.com。
CC BY 4.0 — 可自由使用、修改和再分发，需注明来源。