AI Entry — orientation + hard rules
design-guideline/ai-entry/README.md · 14.8 KB
DOL Design System
AI Entry
Single canonical context for AI tools to learn DOL's design system. Pick the path that matches your AI tool - clone, paste, or point a URL.
https://dol-wiki.khoajak.design/ai/
Track A
Install in your workspace
For AI agents that read your local files (Claude Code, Codex,
Antigravity / Gemini CLI). Clone the repo once; the AI Entry pack
lives at design-guideline/ai-entry/
and docs/ai-color-context.md.
Need access?
Repo is private - ping Khoa with your GitHub username via any channel below. Usually back within a working day.
Already invited? Clone + point your AI at it
Clone via SSH or HTTPS - both work once you're a collaborator.
git clone https://github.com/wblekhoa/DOL-DS-token.git cd DOL-DS-token ls design-guideline/ai-entry/
Tool routing once cloned
- Claude Code - opens
workspace; auto-loads
CLAUDE.md, which routes todesign-guideline/ai-entry/README.md. - Codex CLI - auto-loads
AGENTS.md; same routing target. - Antigravity / Gemini CLI - auto-loads
GEMINI.md; same routing target. - Cursor / Cline / Continue - open the folder; point the agent at
design-guideline/ai-entry/README.mdmanually if no auto-load convention exists. - Other workspace agents - same router file works as the entry point; it lists hard rules + per-task detail-file map.
Track B
Paste or upload
For tools that take a system prompt or knowledge file but don't read your filesystem. Use Copy full pack for a paste-into-prompt flow, or Download .zip to upload as a knowledge file.
ChatGPT
Upload `vibe-code-ui.md` as a file in your conversation, or paste the full pack into the system prompt of a custom GPT.
Google AI Studio
Paste the full pack into the System Instructions field before generating. Increases context use; use Gemini 1.5+ for headroom.
Lovable / Bolt / v0
Paste the full pack into your project's system prompt or knowledge file at project setup.
Figma Make
Paste the full pack into the Make canvas as system context before generating.
Preview pack contents (first ~25 lines)
# DOL Design System — AI Entry (Vibe Code UI Pack) Paste this file into your AI tool (Cursor, Claude, ChatGPT, v0, Lovable, Figma Make, etc.) as system context. The AI will then know DOL's color system, typography, spacing, radius, shadow conventions, hard rules, and anti-patterns — and produce DOL-compliant UI code on first try. **Canonical URL:** https://dol-wiki.khoajak.design/ai/ **Pack contents (in order):** 1. `design-guideline/ai-entry/README.md` — AI Entry — orientation + hard rules 2. `design-guideline/ai-entry/CODE-UI.md` — CODE-UI — UI task router for AI agents 3. `docs/ai-color-context.md` — Color context — paste-ready system prompt 4. `design-guideline/ui-style-guide/CORE.md` — UI style guide CORE — code conventions 5. `design-guideline/anti-pattern-registry.md` — Anti-pattern registry — what NOT to do --- <!-- ============ source: design-guideline/ai-entry/README.md ============ --> # 🎯 AI Entry - Start Here > **Bạn là AI agent đang work trên DOL Education?** Đây là entry duy nhất bạn cần đọc đầu tiên. Từ file này bạn sẽ biết: hard rules nào luôn apply, file detail nào load cho task của bạn, và cách self-verify trước khi declare done. This single file gives you (a) hard rules that always apply, (b) a router from "what I'm doing" → "what file to read next", and (c) a self-check before shipping. Detail content lives in linked files — load on demand, not eagerly. --- ## 1. 30-second workspace orientation DOL Edu = multi-repo education platform. Product …(truncated - Copy full pack to get all 89.3 KB)
Pack contents - per-source copy
5 sources · 94.8 KB totalCODE-UI — UI task router for AI agents
design-guideline/ai-entry/CODE-UI.md · 15.0 KB
Color context — paste-ready system prompt
docs/ai-color-context.md · 10.9 KB
UI style guide CORE — code conventions
design-guideline/ui-style-guide/CORE.md · 36.8 KB
Anti-pattern registry — what NOT to do
design-guideline/anti-pattern-registry.md · 17.3 KB
Track C
Auto-fetch URL
For AI tools that fetch URLs themselves. Point them at the canonical URL - they'll grab the page + assets directly. No copy/paste needed.
Claude (web search)
With web search enabled, mention the canonical URL in your prompt. Claude fetches + indexes it as design context for the rest of the conversation.
Use https://dol-wiki.khoajak.design/ai/ as my design system context. Build a primary button. ChatGPT (browse)
Same pattern as Claude with web browsing turned on, or paste the URL into a custom GPT's instructions so every chat in that GPT has the context.
Antigravity / Gemini (with grounding)
Gemini's web-grounding picks up the URL when you reference it in the prompt. Combine with Track A clone for stronger consistency on long sessions.
Cursor
Type @ in chat → select Docs → paste the canonical URL; the IDE indexes it for the session. For deeper integration, prefer Track A (clone + open the folder).
@Docs https://dol-wiki.khoajak.design/ai/ Starter prompts
Paste any of these once the design system is loaded - whether via clone (Track A: Claude Code / Codex / Antigravity reading workspace files), paste (Track B), or URL fetch (Track C). Use them to verify the context is active - output should reference DOL tokens like bg-brand-600, not generic Tailwind.
Build a component
Using the DOL design system context above, build a primary CTA button in React + Tailwind. Constraints: brand-600 background, on-inverse-primary text, rounded-2xl, 14px font, semibold, hover state per DOL conventions. Output JSX only.
Audit existing UI
Audit the JSX below against the DOL design system. Flag every anti-pattern with the rule ID it breaks (e.g. slop-12, hue-collision-3). For each finding, suggest the canonical replacement. Be terse - table format is fine. ```jsx <!-- paste your JSX here --> ```
Translate Figma to code
Translate the Figma node below into React + Tailwind respecting DOL DS: brand-600 not red-600, slate-* never gray-*, rounded-2xl for cards, border-slate-200 default. Cite the DS rule each Tailwind class follows. Figma node: <paste node ID or URL>