Skip to content

Commit 56e7e15

Browse files
kkunkunyakkunkunya
committed
feat: v0.1.0 initial release
AI-first frontend design kit for Claude Code and Codex. 10 skills covering the 7-stage design flow: - frontend-iteration-planner (scenario C entry router) - frontend-interview-dualround (stages 1 and 3) - frontend-design-research (stage 2 six-dimension tasting) - frontend-visual-reference (stage 4 triptych) - frontend-motion-prompt-writer (stage 4C + 6) - frontend-design-writer (throughline, kun 15-segment) - frontend-design-review (stage 7 retune) - frontend-anti-slop-gate (stage 6 cross-cut ten red-lines) - system-design (orthogonal architecture) - frontend-i18n-essentials (orthogonal i18n) Each skill ships with references/packaged-knowledge/ — the full cognitive methodology snapshotted for portability. Zero external vault dependency. Packaged from private .agents/plugins/frontend-suite on 2026-04-24.
0 parents  commit 56e7e15

63 files changed

Lines changed: 12508 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.claude-plugin/marketplace.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"$schema": "https://anthropic.com/claude-code/marketplace.schema.json",
3+
"name": "ai-frontend-design-kit",
4+
"description": "AI-first frontend design toolkit — 10 skills for Claude Code and Codex covering the full 7-stage design flow.",
5+
"owner": {
6+
"name": "Kunkun",
7+
"url": "https://github.com/kkunkunya"
8+
},
9+
"plugins": [
10+
{
11+
"name": "ai-frontend-design-kit",
12+
"description": "7-stage frontend design flow: six-dimension research, dualround interview, visual anchor triptych, motion prompt writer, kun 15-segment DESIGN.md, anti-slop gate, system architecture, i18n essentials.",
13+
"source": "."
14+
}
15+
]
16+
}

‎.claude-plugin/plugin.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "ai-frontend-design-kit",
3+
"version": "0.1.0",
4+
"description": "AI-first frontend design toolkit for Claude Code and Codex: 7-stage flow (requirement -> six-dimension research -> dualround interview -> visual anchors -> asset gen -> code impl -> design review) + scenario C increment router + ten-line anti-slop gate + kun 15-segment DESIGN.md writer + i18n essentials. Each skill ships with packaged cognitive knowledge snapshots, no external vault dependency.",
5+
"author": {
6+
"name": "Kunkun",
7+
"url": "https://github.com/kkunkunya"
8+
},
9+
"homepage": "https://github.com/kkunkunya/ai-frontend-design-kit",
10+
"license": "MIT",
11+
"keywords": [
12+
"claude-code",
13+
"codex",
14+
"frontend",
15+
"ai-design",
16+
"design-system",
17+
"plugin"
18+
],
19+
"skills": "./skills/"
20+
}

‎.codex-plugin/plugin.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../.claude-plugin/plugin.json

‎.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.DS_Store
2+
*.swp
3+
*.swo
4+
*.pyc
5+
__pycache__/
6+
.vscode/
7+
.idea/
8+
node_modules/

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 Kunkun
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
# AI Frontend Design Kit
2+
3+
> **Constraints before generation.** A 10-skill plugin for Claude Code and Codex that upgrades AI-assisted frontend design from "generate four options, pick one" to a rigorous 7-stage flow with taste-level design contracts.
4+
5+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
6+
[![Claude Code](https://img.shields.io/badge/Claude_Code-plugin-blue)](https://docs.claude.com/en/docs/claude-code)
7+
[![Codex](https://img.shields.io/badge/Codex-plugin-green)](https://github.com/openai/codex)
8+
9+
---
10+
11+
## Why this exists
12+
13+
Most "AI frontend" tooling generates 2–4 page variants and asks you to pick one. That works for throwaway demos. It does not work when you actually care about the result — because AI cannot form your aesthetic judgment for you.
14+
15+
This kit inverts the loop:
16+
17+
1. **Form constraints first** (primary language, six-dimension taste mapping, dualround interview, moodboard anchor, motion spec)
18+
2. **Generate inside those constraints** (visual references, code, iterations)
19+
3. **Review against the contract**, rewrite the contract, loop
20+
21+
The result is a persistent `design.md` (kun 15-segment format) that every subsequent AI agent reads before touching a single line of JSX.
22+
23+
---
24+
25+
## Install
26+
27+
### Claude Code
28+
29+
```bash
30+
# Add this repo as a marketplace
31+
claude plugin marketplace add https://github.com/kkunkunya/ai-frontend-design-kit
32+
33+
# Install the plugin
34+
claude plugin install ai-frontend-design-kit@ai-frontend-design-kit
35+
```
36+
37+
### Codex
38+
39+
```bash
40+
# Clone anywhere
41+
git clone https://github.com/kkunkunya/ai-frontend-design-kit.git ~/codex-plugins/ai-frontend-design-kit
42+
43+
# Register in ~/.codex/config.toml
44+
[[plugins]]
45+
source = "~/codex-plugins/ai-frontend-design-kit"
46+
enabled = true
47+
```
48+
49+
### Verify
50+
51+
After install, ask Claude Code or Codex:
52+
53+
> Start a new frontend project, use the 7-stage flow.
54+
55+
The agent should route to `frontend-interview-dualround` (stage 1). If it does, you're set.
56+
57+
---
58+
59+
## The 10 skills
60+
61+
| Skill | Stage | One-line job |
62+
|---|---|---|
63+
| `frontend-iteration-planner` | Scenario C entry | Increment router — read existing `design.md` + assets, then tier the change into T1 new-page / T2 new-section / T3 micro-tweak |
64+
| `frontend-interview-dualround` | Cross-cut (stage 1 + 3) | Product-designer perspective five-class interview, pre-round to set boundaries + post-round to extract details |
65+
| `frontend-design-research` | Stage 2 | Six-dimension tasting (form / color / type / layout / material / motion) across 4–5 reference sites → `design.md` draft |
66+
| `frontend-visual-reference` | Stage 4 | Visual anchor triptych (moodboard exploration + page mockup + motion frame sequence) via `baoyu-imagine` + manual fallback |
67+
| `frontend-motion-prompt-writer` | Stage 4C + 6 | Translates MOTION-SPEC + frame sequence into LoadingScreen-style code-level prompts |
68+
| `frontend-design-writer` | Stages 1–7 | **The main writer.** Kun 15-segment 4-round workflow; maintains `design.md` + `MOTION-SPEC.md` + `DESIGN-LANGUAGE.md` |
69+
| `frontend-design-review` | Stage 7 | Post-code three-stage interrogation + Tweaks parameter externalization + write-back to `design.md` |
70+
| `frontend-anti-slop-gate` | Stage 6 cross-cut | Ten hard red-lines scan (Inter font / Lila palette / 3-column grid / h-screen / placeholder data / etc.) |
71+
| `system-design` | Orthogonal | System architecture: Design Doc + ADR + structural-impact analysis |
72+
| `frontend-i18n-essentials` | Orthogonal | i18n three-layer orthogonal model (runtime / translation-content / visual) + subagent-parallel translation pipeline |
73+
74+
---
75+
76+
## The 7-stage flow
77+
78+
```
79+
Stage 1 Requirement + pre-round interview ── frontend-interview-dualround (pre)
80+
Stage 2 Six-dimension tasting × 4-5 sites ── frontend-design-research
81+
Stage 3 Post-round interview ── frontend-interview-dualround (post)
82+
Stage 4 Visual anchor triptych ── frontend-visual-reference (A moodboard + B mockup + C motion frames)
83+
Stage 5 Asset generation (dual path) ── baoyu-imagine primary + manual fallback
84+
Stage 6 Code implementation ── your usual dev flow + anti-slop gate
85+
Stage 7 Iteration and micro-tuning ── frontend-design-review
86+
87+
Cross-cuts:
88+
├─ Anti-slop hard bans (stage 6 resident) ── frontend-anti-slop-gate
89+
└─ Dualround interview (stages 1 + 3) ── frontend-interview-dualround
90+
91+
Orthogonal:
92+
├─ System architecture decisions ── system-design
93+
└─ i18n planning (multilingual sites) ── frontend-i18n-essentials
94+
95+
Throughline: design.md is continuously maintained ── frontend-design-writer (kun 15 segments)
96+
```
97+
98+
---
99+
100+
## Three scenario coverage
101+
102+
| Scenario | Trigger | Flow |
103+
|---|---|---|
104+
| **A · Greenfield** | No `design.md` or empty skeleton | Full stages 1–7 |
105+
| **B · Full visual rewrite** | `design.md` exists but main moodboard direction changes | Replay stages 2–4 |
106+
| **C · Increment / extension** | `design.md` finalized + new page / new section / micro-fix | ★ `frontend-iteration-planner` entry router |
107+
108+
---
109+
110+
## Quick start: a 10-line call
111+
112+
Once installed, trigger the full 7-stage flow:
113+
114+
```
115+
User: I want to build a dashboard for a fintech startup. Landing page first.
116+
Start from the 7-stage frontend design flow.
117+
118+
Claude Code:
119+
[routes to frontend-interview-dualround pre-round]
120+
Q1: Who is the primary user — individual traders, institutional PMs, or CFOs?
121+
Q2: Is the primary language stat-dense density, or decisive-action clarity?
122+
Q3: ...
123+
```
124+
125+
Three rounds later you'll have a 15-segment `design.md` committed to your project. From there, every future AI agent reads it before generating code.
126+
127+
---
128+
129+
## What makes this different
130+
131+
1. **15-segment DESIGN.md contract** — Not a README, not a style guide. It's a machine-executable design contract that covers Primary Language → Six-Dimension Tokens → Visual Anchors → Motion Spec → Interview Log. Written in kun format, four-round sequence.
132+
2. **Six-dimension mechanical skeleton** — Form / Color / Typography / Layout / Material / Motion. Every reference site gets tasted across all six; every token in `design.md` hangs under one of these.
133+
3. **Moodboard exploration moved forward** — The "AI generates four variants" step happens at the moodboard (stage 4A), not at the code (stage 6). By the time code starts, the aesthetic contract is locked.
134+
4. **Ten-line anti-slop gate** — Ten hard bans that catch the AI's default aesthetic (Inter everything / 3-column grid / `h-screen` hero / placeholder data / emoji CTAs / etc.) before the user sees the result.
135+
5. **Packaged cognitive knowledge** — Each skill ships with `references/packaged-knowledge/` — the full cognitive methodology that originally lived in the author's Obsidian vault, snapshotted and embedded. Zero external dependency.
136+
137+
---
138+
139+
## Requirements
140+
141+
- **Claude Code** ≥ 2.0 with plugin marketplace support, **or**
142+
- **Codex** with plugin loading via `~/.codex/config.toml`
143+
- No Python / Node dependencies for the skills themselves
144+
- (Optional) `baoyu-imagine` or similar image-generation skill for stage 5 asset generation — manual fallback supported
145+
146+
---
147+
148+
## Project status
149+
150+
**v0.1.0 · Initial release.** Extracted and desensitized from the author's private `.agents` plugin workspace, where it has been in daily use since 2026-04 for production frontend design work.
151+
152+
The kit is stable; the cognitive layer (in `references/packaged-knowledge/`) is a snapshot taken on 2026-04-24. Future updates will be tagged releases.
153+
154+
---
155+
156+
## Philosophy
157+
158+
> AI does not form aesthetic judgment for you. AI delivers fast exploration, implementation, retrospection, and iteration *inside* the judgment boundary you draw.
159+
160+
If this resonates, you'll feel at home. If you're looking for a "one prompt, beautiful site" magic box — this is not that, and nothing else is either.
161+
162+
---
163+
164+
## Acknowledgements
165+
166+
- The 7-stage flow crystallized from ~40 production frontend sessions with Claude Code and Codex
167+
- The six-dimension skeleton borrows vocabulary from industrial design taxonomies
168+
- The kun 15-segment DESIGN.md format evolved out of friction with `alexpate/awesome-design-systems` templates and Stitch-style component contracts
169+
170+
---
171+
172+
## License
173+
174+
MIT © 2026 Kunkun ([@kkunkunya](https://github.com/kkunkunya))

0 commit comments

Comments
 (0)