Open experiment ↗
CASE 01
Nocturne Concierge
Editorial hospitality · atmospheric restraint · intent-led motion
- Internal score
- 92.8
- Field evidence
- Pending
For non-designers who vibe-code the front endOpen source / MIT
Design with a
point of view.
Ship with evidence.
Your agent can generate UI. The hard part is knowing why it feels wrong—and how to fix it. This operating system routes the work through art direction, implementation, independent critique, accessibility, and rendered browser QA.
npx --yes github:Lrinvl1203/world-class-web-design-os install --agent codex
- Free and MIT licensed
- No account or API key
- Node 20+ required
- See the 60-second path ↓
RUN / WEBSITESYSTEM READY
- 01Intentjob · audience · action
- 02DirectionPOV · anti-direction
- 03Buildsemantic · responsive
- 04Challengecritic · AI smell
- 05Provescreens · a11y · perf
Critical content survives without motion. Every flourish needs a communication job.
17specialist skills
100studied references
6QA viewports
5verified archetypes
Dailycontrolled learning
01 / First successful use
One command.
One new session.
One normal sentence.
No design vocabulary is required. Install the system, refresh skill discovery, and describe the website you need in plain language.
-
01 / TERMINAL
Install the 17 skills globally.
npx --yes github:Lrinvl1203/world-class-web-design-os install --agent codexPaste this into a terminal inside or outside your project. It does not modify the website yet.
-
02 / REFRESH
Start a new Codex session.
web-design-os doctor --agent codexThe doctor should report 17/17 READY. A new session lets Codex discover the installed skills.
-
03 / ASK NORMALLY
Give it the real product job.
Use $web-design-orchestrator to redesign and implement this website for [audience], then verify it on mobile and desktop.
02 / See it work
Fifteen seconds.
Five different outcomes.
The same operating system produced five deliberately different website archetypes. The demo proves operation and range—not user validation or award status.
PUBLIC TEST / SAME INPUTS
Compare your normal workflow with Web Design OS using the same brief, assets, agent, model, and time budget. Publish the raw evidence—even when the OS loses.
Run the Same Brief Challenge ↗03 / Rendered proof
Inspect the output,
not the adjective.
Five deliberately different archetypes exercise the same system. Scores are internal Design Quality evaluations, not field validation.
Open experiment ↗
Open experiment ↗
CASE 02
Linehold Forge
Industrial commerce · dense utility · responsive recomposition
- Internal score
- 91.8
- Status
- Hold
Open experiment →
CASE 03
Afterimage Atlas
Editorial culture · object-led inspection · five-state narrative
- Internal score
- 92.7
- Field evidence
- Pending
Open experiment →
CASE 04
Sequence Desk
Product UI · component states · accountable launch workflow
- Internal score
- 92.8
- Field evidence
- Pending
Open experiment →
CASE 05
Orbital Commons
Civic data · purposeful pseudo-3D · semantic HTML fallback
- Internal score
- 94.3
- Field evidence
- Pending
04 / Operating method
One orchestrator.
Specialists on demand.
The system activates only the skills needed for the job, keeps implementation and critique separate, then records reusable defects through a controlled proposal loop.
DESIGN DISCOVERY
Find the job before the style.
Define the audience, primary action, content hierarchy, constraints, and questions that must be true before visual work begins.
Exit gateA testable brief with one primary action
05 / The difference
A system, not a style vending machine.
Typical prompt pack
- Style words before product intent
- One implementation pass
- Desktop screenshot as completion
- Uncontrolled inspiration intake
World-Class Web Design OS
- Business job and anti-direction first
- Independent critique and AI-smell audit
- Responsive, keyboard, axe, overflow, and console gates
- Evidence-backed learning proposals—never silent mutation
06 / Install details
Install once.
Ask normally.
After installation, a plain-language website request automatically starts with the orchestrator.
01 / RUN
02 / ASK
npx --yes github:Lrinvl1203/world-class-web-design-os install --agent codex“이 제품의 웹사이트를 디자인하고 구현해줘.”
The skill system is installed to your global Codex skills directory. Add --overwrite when updating an existing installation.
07 / Trust model
The gates are part
of the design.
Accessible by construction
Semantic structure, keyboard reachability, visible focus, target sizing, reduced motion, and axe checks are release gates.
Responsive by recomposition
Mobile is assigned a new hierarchy and interaction model instead of receiving a mechanical desktop stack.
Learning under review
Daily sources create dated proposals. Core skills change only after evidence, regression checks, and human adoption.
Claims labeled honestly
Internal scores, automated checks, and field evidence are separate signals. One never impersonates another.
08 / Before you install
Useful boundaries,
not bigger promises.
The OS is strongest as a governed workflow. It does not replace product judgment, user research, or a designer with real domain context.
Is this another component library or style prompt collection?
No. It can choose native HTML, custom components, registries, motion, or purposeful 3D after the user job and art direction are clear. The reusable product is the decision and verification workflow.
Is it universally better than UI prompt packs or design courses?
No universal claim is made. Its narrower advantage is connecting discovery, art direction, implementation, independent critique, responsive work, accessibility, browser QA, and controlled learning in one route.
Does “daily learning” silently rewrite the skills?
No. Trusted feeds and authorized APIs produce review artifacts. A recurring principle still needs three independent sources, counterexamples, regression scenarios, and an intentional reviewed change.
Why must I start a new session after installation?
Agent skill discovery happens when the session starts. Opening a fresh session prevents an old capability list from making the new skills appear missing.
Do I need animation or 3D for every site?
No. CSS or no motion is often the correct choice. 3D, WebGL, and heavier animation engines are used only when they communicate the product or brand idea and survive accessibility and performance review.
OPEN SOURCE / MIT