What makes EDIC 设计系统 notable?

1.2K downloads. Trust evidence available

How should EDIC 设计系统 be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

EDIC 设计系统

Generate UI components, full pages, documents, emails, and assets aligned with the EDIC design system (Editorial × Olive Green, OKLch tokens for web/UI, dark-mode ready, CJK-optimized; emails use compatible static styles). Use this skill whenever the user asks to build, style, or refactor anything for EDIC, or explicitly requests the EDIC / "editorial olive" design system. Output token-driven, accessible, framework-agnostic HTML/CSS. Skill: EDIC 设计系统 Owner: cgartlab Summary: Generate UI components, full pages, documents, emails, and assets aligned with the EDIC design system (Editorial × Olive Green, OKLch tokens for web/UI, dark-mode ready, CJK-optimized; emails use compatible static styles). Use this skill whenever the user asks to build, style, or refactor anything for EDIC, or explicitly requests the EDIC / "editorial olive" design system. Ou

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.2k

Updated

Oct 10, 2026

Version

2.8.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.2K downloads reported by the source. Last updated 10/10/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 10, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 10, 2026
Adoption signal: 1.2K downloadsadoption · observed Oct 10, 2026
Latest release: 2.8.0release · observed Sep 24, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s170q5xetyqnsqsqvq5av2rpz58847mv:edic-design-system

Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-cgartlab-edic-design-system/snapshot"

Documentation

CLAWHUB

149,615 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: edic-design-system
slug: edic-design-system
displayName: EDIC 设计系统
version: 2.8.0
description: >-
  Generate UI components, full pages, documents, emails, and assets aligned
  with the EDIC design system (Editorial × Olive Green, OKLch tokens for
  web/UI, dark-mode ready, CJK-optimized; emails use compatible static styles).
  Use this skill whenever the user asks
  to build, style, or refactor anything for EDIC, or explicitly requests the
  EDIC / "editorial olive" design system. Output token-driven, accessible,
  framework-agnostic HTML/CSS.
license: MIT-0
---

# EDIC Design System Skill

When this skill is active, every visual artifact you produce — components, pages,
landing sections, documentation, emails, reports — should follow the EDIC
design system. **Prefer design tokens (CSS custom properties) for web/UI.
Never hard-code magic numbers. Use compatible static styles for email.**

## Manifest-First Workflow

When this skill is active for an EDIC project, use manifest-first behavior:

1. Read `edic-manifest.json` for the authoritative deliverable, token,
   component, icon, validator, and constraint list.
2. Read `tokens.json`, `icons.json`, and `AGENT-GUIDE.md` when generating or
   auditing UI.
3. Read `docs/component-gap-audit.md` and `docs/component-2.0-backlog.md`
   before proposing, adding, or claiming completion of a component.
4. Read `skills/edic-design-system/references/CONTRACTS.md` before creating a
   new component or improving an interactive component.
5. Read `references/ANTI-PATTERNS.md` before fixing or reviewing generated UI.

Component generation rules:

- Existing manifest core components must use the documented `ds-*` class family
  and examples; do not invent parallel class names.
- New components must follow the component contract in
  `references/CONTRACTS.md`.
- Add CSS to `styles.css` before adding HTML examples in `docs.html`.
- Use token-only visual values and include dark-mode coverage.
- Include ARIA metadata and keyboard behavior for interactive components.
- Mark a task complete only after `npm run audit` passes.

## Design character
- **Editorial × Olive Green**: magazine-grade restraint, generous whitespace,
  serif headings + sans body, a warm paper background, and a confident — never
  loud — olive-green accent.
- Reference moods: Monocle (typographic restraint), Stripe (warm utility),
  Mercury (refined calm).

## Hard rules (anti-patterns)
- Define web/UI colors in **OKLch**; mix with `color-mix(in oklch, …)`.
- Use `var(--ds-*)` tokens for every web/UI visual value. No hard-coded `#fff` / `16px`.
- Dark mode never uses pure black `#000` — use warm grey `oklch(17% 0.014 80)`.
- In dark mode, lighten the accent ~5–10% vs. light mode.
- Components use base + modifier: `ds-btn` / `ds-btn--primary`.
- No inline `style=` except genuinely dynamic values (e.g. stagger `--d`).
- Icon-only buttons need `aria-label`; decorative SVGs need `aria-hidden="true"`.
- Prefer semantic aliases such as `--ds-co

README.md

# EDIC Design System Skill Package v2.8.0
# EDIC 设计系统 Skill 技能包 v2.8.0

[![License: MIT-0](https://img.shields.io/badge/License-MIT%200-blue.svg)](https://spdx.org/licenses/MIT-0.html)
[![Version](https://img.shields.io/badge/Version-2.0.0-green.svg)](https://edic.cgartlab.com/)

---

## 适用场景 Scope

**✅ 适合以下场景：**

- 内容型网站、博客、文章排版
- 企业官网、品牌落地页
- 内部报告、多页文档
- 邮件模板、通讯设计
- 个人主页、作品集
- 需要精致 CJK（中日韩）排版的项目
- AI 辅助生成的界面原型

**❌ 目前不适合以下场景：**

- 游戏 UI（高对比/霓虹/像素风格）
- 重 Glassmorphism 风格
- 移动端原生应用（iOS/Android）
- 需要完全定制品牌色的项目（非橄榄绿体系）

> 以上不适用场景未来不排除支持，欢迎在 [GitHub Issues](https://github.com/cgartlab/edic-design-system/issues) 提需求。

---

## 快速上手 Quick Start

无论使用哪种 AI 工具，三步即可产出符合 EDIC 规范的界面：

**第一步：安装 Skill**（见下方各平台安装说明）

**第二步：用自然语言描述需求**

```
用 EDIC 设计系统，帮我做一个博客文章卡片列表，
包含封面图、标题、摘要、日期和「阅读全文」按钮。
```

**第三步：粘贴输出，即刻预览**

将 AI 返回的 HTML 片段粘贴进项目，确保已引入 `styles.css` 和 `scripts.js`，刷新即可预览 EDIC 样式。

> **Prompt 技巧：** 可以在描述需求时附加风格关键词，例如「偏杂志排版」「需要暗色模式」「CJK 中文优先」，Agent 会优先参考对应的组件和令牌。

---

## 安装 Installation

### Claude Code / Claude Code

```bash
# 项目级安装（推荐）
mkdir -p .claude/skills
# 解压本 ZIP，将 edic-design-system 目录内容放入 .claude/skills/edic-design-system/
# 或直接放置 SKILL.md 文件

# 全局安装
mkdir -p ~/.claude/skills/edic-design-system
cp SKILL.md ~/.claude/skills/edic-design-system/
```

> **验证安装成功**：将以下最小 demo 保存为 `test.html`，用浏览器打开——看到橄榄绿按钮即表示样式加载正常；
> 同时在 Claude Code 中发送「用 EDIC 设计系统设计一个按钮」，Claude 应使用 `ds-btn ds-btn--primary` 类名并遵循 `--ds-*` 令牌规范。

```html
<!doctype html>
<html lang="zh-CN" data-theme="">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EDIC 安装验证</title>
    <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/cgartlab/edic-design-system@main/styles.css">
  </head>
  <body style="padding: 2rem">
    <button class="ds-btn ds-btn--primary">EDIC 安装成功 ✓</button>
    <script
      src="https://cdn.jsdelivr.net/gh/cgartlab/edic-design-system@main/scripts.js">
    </script>
  </body>
</html>
```

> **中文字体说明：** EDIC 使用系统字体栈（`"Noto Sans SC"`、`"Noto Serif SC"`），无需额外安装。
> 若目标环境未预装 Noto SC（如部分 Windows / Linux），可在 `<head>` 中补充以下代码确保稳定渲染：
>
> ```html
> <link rel="preconnect" href="https://fonts.googleapis.com">
> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
> ```

### Cursor

```bash
# 方式一：写入项目级规则（推荐）
# 文件：.cursor/rules/edic-design-system.md
# 内容：复制 SKILL.md 的设计原则和组件规范部分

# 方式二：复制到全局 skills
mkdir -p ~/.cursor/skills/edic-design-system
cp SKILL.md ~/.cursor/skills/edic-design-system/
```

### Kiro

```bash
# 写入 steering 文件
mkdir -p .kiro/steering
# 复制 SKILL.md 设计规范到 .kiro/steering/edic-design-system.md
```

### GitHub Copilot

```bash
# 写入项目说明
# 文件：.github/copilot-instructions.md
# 内容：复制 SKILL.md 的设计原则、令牌和组件规范
```

### ChatGPT / Gemini / 其他 LLM

将 `SKILL.md` 的核心内容（设计原则 + 令牌速查 + 组件类名表）复制到：
- ChatGPT：Settings → Custom Instructions →

_meta.json

{
  "ownerId": "kn7a3fym68pryr0r1q29ybrp8181qsdg",
  "slug": "edic-design-system",
  "version": "2.8.0",
  "publishedAt": 1790245237332
}

references/ANTI-PATTERNS.md

# EDIC Anti-Patterns & Correct Replacements
# 反模式 × 正确替代对照表

> Loaded on demand when validating or correcting generated code.
> Each entry shows the wrong pattern, why it fails, and the exact replacement.

---

## Color Anti-Patterns

### ❌ Hard-coded hex / rgb / hsl colors

```css
/* ❌ Wrong */
color: #333;
background: #fff;
background: rgb(255, 255, 255);
border-color: hsl(0 0% 90%);
```

```css
/* ✅ Correct — use semantic color tokens */
color: var(--ds-color-fg);
background: var(--ds-color-surface-raised);
background: var(--ds-color-surface-raised);
border-color: var(--ds-color-border);
```

**Why:** Hex/rgb/hsl values do not update in dark mode. `--ds-*` tokens switch
automatically via `[data-theme="dark"]`.

---

### ❌ Bare `oklch()` outside `:root` / `[data-theme]` / `@keyframes`

```css
/* ❌ Wrong — bare oklch in a component rule */
.my-card {
  background: oklch(97% 0.012 80);
  color: oklch(20% 0.02 60);
}
```

```css
/* ✅ Correct — reference the token */
.my-card {
  background: var(--ds-color-bg);
  color: var(--ds-color-fg);
}
```

**Why:** Bare `oklch()` in component rules bypasses the token system and breaks
dark mode. Bare oklch is only allowed in `:root` and `[data-theme="dark"]` token
declarations, and in `@keyframes`.

---

### ❌ Pure black in dark mode

```css
/* ❌ Wrong */
[data-theme="dark"] .surface { background: #000; }
[data-theme="dark"] .surface { background: oklch(0% 0 0); }
```

```css
/* ✅ Correct — warm dark base */
[data-theme="dark"] .surface { background: var(--ds-color-bg); }
/* which resolves to: oklch(17% 0.014 80) — warm grey, not cold black */
```

---

### ❌ Using light-mode accent directly in dark mode

```css
/* ❌ Wrong — olive-400 light value is too dark on dark backgrounds */
[data-theme="dark"] .accent-text { color: oklch(52% 0.08 115); }
```

```css
/* ✅ Correct — dark-mode accent is 5–10% lighter */
[data-theme="dark"] .accent-text { color: var(--ds-accent); }
/* which resolves to: oklch(57% 0.065 115) in dark mode */
```

---

## Spacing Anti-Patterns

### ❌ Hard-coded pixel or rem values

```css
/* ❌ Wrong */
padding: 16px;
margin-top: 24px;
gap: 8px;
padding: 1rem;
```

```css
/* ✅ Correct — use spacing tokens */
padding: var(--ds-space-4);      /* = 16px = 1rem */
margin-top: var(--ds-space-6);   /* = 24px = 1.5rem */
gap: var(--ds-space-2);          /* = 8px = 0.5rem */
padding: var(--ds-space-4);      /* same value, correct source */
```

**Quick mapping:**
`4px` → `--ds-space-1` · `8px` → `--ds-space-2` · `12px` → `--ds-space-3` ·
`16px` → `--ds-space-4` · `24px` → `--ds-space-6` · `32px` → `--ds-space-8`

---

## Inline Style Anti-Patterns

### ❌ Static inline `style=` attributes

```html
<!-- ❌ Wrong — static values bypass token system -->
<div style="padding: 16px; background: #fff; border-radius: 8px;">
```

```html
<!-- ✅ Correct — use component classes -->
<div class="ds-card">

<!-- ✅ Also correct — inline style only for genuinely dynamic values -->
<div class="ds-reveal" style="--d: 0.

references/EXAMPLES.md

# EDIC Component HTML Examples
# 高频复合组件 HTML 结构示例

> This file is loaded on demand when complex component structure is needed.
> All examples assume `styles.css` and `scripts.js` are linked.

---

## 1. Glass Card (`ds-glass-card`)

The glass card requires a colored background parent (`ds-glass-demo-bg`) to show the
backdrop-filter effect. `ds-glass-meta` lives **inside** `ds-glass-card` as the footer row.

```html
<!-- ✅ Correct: colored parent + card + inner meta -->
<div class="ds-glass-demo-bg">
  <div class="ds-glass-card">
    <span class="ds-badge ds-badge--accent">新</span>
    <h4>橄榄园笔记</h4>
    <p>玻璃卡片需要彩色背景父容器才能显示毛玻璃效果。</p>
    <div class="ds-glass-meta">
      <span class="ds-caption ds-text-muted">2026-06</span>
      <button class="ds-btn ds-btn--ghost">阅读全文</button>
    </div>
  </div>
</div>

<!-- ❌ Wrong: ds-glass-card placed directly on a plain white page —
     backdrop-filter has nothing to blur, card looks like a plain white box -->
```

Size modifiers: add `ds-glass-card--sm` (padding 1rem) or `ds-glass-card--lg` (padding 2rem).

---

## 2. Docs Layout (`ds-docs`)

Two-column layout: fixed sidebar left, scrollable main right.
`ds-docs-aside` holds `ds-pagenav`; `ds-docs-main` holds `ds-prose` content.

```html
<div class="ds-docs">
  <aside class="ds-docs-aside">
    <nav class="ds-pagenav" aria-label="页面导航">
      <details class="ds-pagenav-disclosure" open>
        <summary class="ds-pagenav-summary">
          <span class="ds-pagenav-chevron">▶</span> 目录
        </summary>
        <ol class="ds-pagenav-list">
          <li>
            <a href="#section-1" class="ds-pagenav-link ds-pagenav-link--active">
              <span class="ds-pagenav-num">01</span>
              <span class="ds-pagenav-text">介绍</span>
            </a>
          </li>
          <li>
            <a href="#section-2" class="ds-pagenav-link">
              <span class="ds-pagenav-num">02</span>
              <span class="ds-pagenav-text">安装</span>
            </a>
          </li>
        </ol>
      </details>
    </nav>
  </aside>

  <main class="ds-docs-main ds-prose" id="ds-main">
    <section id="section-1">
      <h1>介绍</h1>
      <p>正文内容区域，自动控制行宽在 65–75 字符。</p>
    </section>
    <section id="section-2">
      <h2>安装</h2>
      <p>引入 <code>styles.css</code> 即可。</p>
    </section>
  </main>
</div>
```

---

## 3. Navbar (`ds-navbar`)

The navbar uses a `::before` pseudo-element for the frosted glass background —
**do not add `background` directly on `.ds-navbar`**. JS adds `--scrolled` on scroll.

```html
<nav class="ds-navbar" role="navigation" aria-label="主导航">
  <div class="ds-navbar-inner">
    <!-- Brand -->
    <a href="/" class="ds-navbar-brand">
      <svg width="24" height="24" aria-hidden="true"><!-- logo mark --></svg>
      EDIC
    </a>

    <!-- Links (hidden on mobile; shown via mnav-panel JS) -->
    <div class="ds-navbar-links" id="mnav-panel">
      <a href="/" class="ds-navbar-link ds-navbar-link--active" aria-current="page">首页<

Github ReposUpdated 1d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.