my-design-grade

my-design-grade

Taking a single screen of an EO internal web tool from a "just works" level to a "looks expensive and feels fast" level with a design self-grading skill.

Source: The 8-pillar checklist and self-grading loop from Metics Media's "Build $10,000 Websites using Claude Code" (2026-05-29), adapted to the EO common design system.

When to use

• When you want to raise the screen quality of internal tools such as contract-review, finance-dashboard, eo-portal, token-dashboard, etc.
• Requests like "How's this screen design?", "Grade the UI", "Make it look more expensive", "Remove the AI look"
• When you want to set a quality baseline before building a new screen

Core philosophy (3 points)

1. Nail down the criteria first — Define the 8 pillars before building, then grade against those criteria after the build.
2. Not "what to add" but "how it should feel" — intent over specifics.
3. Not one at a time, but in a batch — Put 5 small fixes in one prompt. Saves tokens + improves cohesion.

Workflow

① self-grading(진단) → ② batch-fix(의도로 한 번에) → ③ drive-yourself(평평한 섹션 모션 1개씩) → 재채점

Repeat 2–3 times until "everything is Strong."

Execution procedure

1. Identify the target screen — Figure out which screen of which tool, via the live URL or source path.
2. Load the full playbook — references/eo-design-self-grading.mdwith Read. It contains the 8-pillar definition + 3 types of prompts (grading/batch-fix/motion).
3. ① Grading — Grade the screen as Strong/Mixed/Missing using the §2 self-grading prompt. "be honest," don't be generous. At the end, list the "top 3 that need the most work" as priorities.
4. ② batch-fix — Use the §3 prompt to propose fixes for all Mixed/Missing items at once by intent → approve → apply in bulk.
5. ③ Motion pass — Use the §4 prompt to scroll through directly, find flat sections, and add one restrained interaction per section. If it's too obvious, "make it more subtle."
6. Re-grade — Go back to ① and check the improvement.

EO guardrails (always apply)

• Background #0A0A0A, accent #00E87A only one (don't overuse)
• No Inter font(AI-tell) → Geist/Pretendard
• No em-dash (—)(external-copy AI tell) → periods, commas, colons
• raw JSON / ** No markdown visible on screen
• API unauthenticated = 401 JSON(no 302 redirect)
• Dates use the KST utility(toISOString is forbidden)
• Currencies use ₩XXX · $YYY dual notation

Detailed 8-pillar criteria and full prompt text → references/eo-design-self-grading.md