[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81095":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":11,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":14,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":15,"rankGlobal":9,"rankLanguage":9,"license":16,"archived":17,"fork":17,"defaultBranch":18,"hasWiki":19,"hasPages":17,"topics":20,"createdAt":9,"pushedAt":9,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":14,"starSnapshotCount":14,"syncStatus":13,"lastSyncTime":30,"discoverSource":31},81095,"codex-visual-builder-guild","vibeforge1111\u002Fcodex-visual-builder-guild","vibeforge1111","Free H70-C+ Spark Skill Graphs guild for Codex visual builder loops with imagegen and vision.",null,"JavaScript",41,5,2,0,2.33,"MIT License",false,"main",true,[21,22,23,24,25,26],"codex","h70-cplus","imagegen","spark-skill-graphs","ui-design","vision","2026-06-12 02:04:10","# codex-visual-builder-guild\n\n[![CI](https:\u002F\u002Fgithub.com\u002Fvibeforge1111\u002Fcodex-visual-builder-guild\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fvibeforge1111\u002Fcodex-visual-builder-guild\u002Factions\u002Fworkflows\u002Fci.yml)\n[![MIT License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-gold.svg)](LICENSE)\n\n![Codex Visual Builder Guild hero](assets\u002Fhero-guild-banner.png)\n\nWelcome to the **Codex Visual Builder Guild**: a free, open-source guild of H70-C+ Spark Skill Graphs that helps Codex build better-looking apps with imagegen, screenshots, vision review, and specialist delegation.\n\nThink of it like hiring a tiny fantasy design studio for your Codex Desktop session. One specialist checks spacing. One makes assets. One stress-tests mobile. One guards accessibility. One turns the winning design into reusable rules. Together, they help Codex stop guessing and start looking.\n\nFree community drop. MIT licensed. Fork it, remix it, install it into Spark Skill Graphs, or use the YAML skills directly in your own agent runtime.\n\n## 30 Seconds, 2 Minutes, 5 Minutes\n\n**In 30 seconds:** this makes Codex look at the real UI before it claims the design is good.\n\n**In 2 minutes:** install one Codex skill:\n\n```powershell\ngit clone https:\u002F\u002Fgithub.com\u002Fvibeforge1111\u002Fcodex-visual-builder-guild.git\ncd codex-visual-builder-guild\nnpm install\nnpm run install:codex\n```\n\n**In 5 minutes:** restart Codex Desktop, open your app, and paste the [first-win prompt](#your-first-5-minute-win). Codex should return before\u002Fafter screenshots, the biggest visual issue, the fix, what still needs work, and whether any specialist lens was actually useful.\n\nFor the shortest path, read [`QUICKSTART.md`](QUICKSTART.md).\n\n## If You Are New, Choose This Path\n\nMost builders should start with **Codex Desktop**. You do not need Spark Skill Graphs for the first win.\n\n| You are... | Use this path | What you install |\n| --- | --- | --- |\n| using Codex Desktop and want visual QA now | **Codex wrapper** | one native Codex skill |\n| building your own agent runtime | standalone YAML | files from `design\u002F*.yaml` |\n| already running Spark Skill Graphs | Spark dashboard path | `design\u002F*.yaml` plus the bundle |\n\nIf you are unsure, choose the Codex wrapper. It is the fastest path from \"I saw this on X\" to \"Codex fixed a rendered UI after looking at screenshots.\"\n\n## Install For Codex\n\nIf you just want to use the guild inside Codex Desktop, install the native Codex wrapper skill:\n\n```powershell\ngit clone https:\u002F\u002Fgithub.com\u002Fvibeforge1111\u002Fcodex-visual-builder-guild.git\ncd codex-visual-builder-guild\nnpm install\nnpm run install:codex\n```\n\nThe installer prints the exact skill folder, verifies that `SKILL.md` was copied, and gives you the smoke prompt.\n\n**Important:** restart Codex Desktop or open a new Codex session after installing. Already-open sessions may not see newly installed skills.\n\nThen say:\n\n```text\nUse codex-visual-builder-guild to run the visual builder loop on this app.\n```\n\nThat gives Codex one easy skill to invoke. The wrapper skill knows the full 19-specialist guild and can route work through the right specialist lens.\n\nThe default is intentionally small: one visible win first, at most 1-2 specialist lenses, and screenshot proof before claims.\n\n## Your First 5-Minute Win\n\nUse this when you want proof that the guild works, not a long design ceremony:\n\n```text\nUse codex-visual-builder-guild on this app.\n\nRun it locally, take desktop, tablet, mobile, and awkward in-between screenshots, inspect the rendered UI with Codex App vision, name the top 3 visual issues, fix the highest-impact one, capture after screenshots, then run a Post-Fix Ruthlessness Check before accepting the result.\n\nEnd with a plain-English before\u002Fafter summary and the screenshot paths.\n```\n\nExpected result:\n\n- Codex runs the app instead of guessing from source code.\n- You get desktop, tablet, mobile, and fluid breakpoint screenshots.\n- Codex records concrete vision observations from those screenshots.\n- The guild names the biggest visible problem.\n- The guild uses at most 1-2 specialist lenses unless screenshots prove more are needed.\n- Codex fixes one high-impact issue and screenshots the result.\n- Codex checks whether the first fix left awkward onboarding copy, duplicated actions, box soup, text-first clutter, or responsive regressions.\n- The final answer follows the Run Report Contract: goal, viewport matrix, state matrix, screenshots inspected, vision observations, top issues, chosen issue, lens used, exact fix, verification, post-fix ruthlessness, accepted visual change, still weak, reusable rule, automation notes.\n\nWant a disposable target? Open [`examples\u002Ffirst-run-demo`](examples\u002Ffirst-run-demo) and ask the guild to improve it.\n\nSee the shape of a successful result: [`examples\u002Ffirst-run-demo\u002FPROOF_PACKET.md`](examples\u002Ffirst-run-demo\u002FPROOF_PACKET.md).\n\n## The 10-Second Pitch\n\n![What you get](assets\u002Fwhat-you-get.png)\n\nMost AI-made UIs fail because the agent writes code once and never really sees the result.\n\nThis guild gives Codex a loop:\n\n```text\nbuild -> run -> screenshot -> vision review -> delegate -> fix -> compare -> keep the rules\n```\n\nThat means Codex can:\n\n- generate UI-ready image assets instead of waiting on placeholders\n- inspect real screenshots with Codex App vision instead of guessing from code\n- catch mobile, spacing, contrast, and interaction problems\n- check whether the user flow is understandable, low-friction, and not overwhelming\n- hand narrow problems to specialist skills\n- turn great screens into art-bible rules, component contracts, tokens, and regression baselines\n- work standalone or inside Spark Skill Graphs\n\n## Codex App Native Guardrails\n\nThe Codex wrapper is optimized for what Codex App gives you natively:\n\n- **Vision is the judge.** Every visual claim should come from a real screenshot or rendered state that Codex App inspected with vision.\n- **The in-app browser is live context.** When a URL is open, use that rendered page as the product surface before guessing from files.\n- **Imagegen is for integrated assets.** Generate custom visuals only when they make the product clearer, then put them in the UI and screenshot them in context.\n- **Screenshots are shareable proof.** Final reports should include local screenshot paths and plain-English observations about what changed.\n- **Metrics support vision.** DOM measurements, tests, and screenshot filenames can support a finding, but they should not replace visual inspection.\n- **Native beats generic.** Prefer Codex App vision, local images, clickable files, and screenshot evidence over external wrappers that hide what Codex can already do.\n\n## Start With This Prompt\n\nPaste this into Codex Desktop when you want the full guild experience. If you installed the Codex skill, start with `Use codex-visual-builder-guild`.\n\n```text\nUse codex-visual-builder-guild as a visual product team.\n\nGoal: [describe what we are building].\n\nRun the app locally, take screenshots on desktop, tablet, mobile, and an awkward in-between width, inspect the rendered UI with Codex App vision, and delegate issues to the right specialists. Use imagegen when custom assets would improve the product, then integrate and screenshot those assets in context. Focus on hierarchy, spacing, contrast, text fit, responsive layout, interaction states, accessibility, user-flow clarity, overwhelm, and component-system consistency.\n\nDo not stop at the first draft. Iterate until the UI feels polished, compare before\u002Fafter screenshots, and summarize the final design rules.\n```\n\nMore copy-paste prompts live in [PROMPTS.md](PROMPTS.md).\n\n## No-Ceremony Workflow\n\nThe best dogfood runs showed that the guild helps most when it behaves like a compact visual QA loop, not a parade of roles.\n\nUse this order:\n\n1. Start with the minimum useful pass.\n2. Route to a specialist only when screenshot evidence proves the failure class.\n3. Fix one high-impact issue.\n4. Preserve before\u002Fafter screenshots.\n5. Leave a proof packet another builder can inspect.\n\nSee [`WORKFLOW.md`](WORKFLOW.md) for the lens router, stronger proof packet, and optional Playwright, Storybook\u002FChromatic, axe, and Web Vitals recipes.\n\nYou can also scaffold the proof artifacts:\n\n```powershell\nnpm run recommend-workflow -- --need \"dashboard mobile regression\"\nnpm run create-proof-packet -- --cwd ..\u002Fmy-app\nnpm run check-proof-packet -- --cwd ..\u002Fmy-app\nnpm run score-proof-packet -- --cwd ..\u002Fmy-app\nnpm run scaffold:playwright-visual -- --cwd ..\u002Fmy-app --url http:\u002F\u002F127.0.0.1:5173 --name dashboard\n```\n\nFor honest guild-vs-plain-Codex evals, use [`benchmarks\u002FRUN_TEMPLATE.md`](benchmarks\u002FRUN_TEMPLATE.md). The benchmark folder is intentionally empty of fake wins; add only runs with real screenshots and proof scores.\n\n## How It Works\n\n![How it works](assets\u002Fhow-it-works.png)\n\nThe guild is not a design theory packet. It is a working loop:\n\n1. Codex builds or changes the app.\n2. Codex runs it locally.\n3. Codex captures screenshots.\n4. Vision inspects what actually rendered.\n5. The guild routes problems to specialists.\n6. Codex fixes the product and screenshots it again.\n7. Winning choices become reusable rules.\n\nImagegen creates source material. Vision judges the real interface. Specialist lenses make the routing explicit. Spark Skill Graphs are optional unless you want the full graph\u002Fdashboard path.\n\n## Summon The Right Specialist\n\nUse the full guild prompt when you want the whole team. Use a specialist lens when you already know the problem. For most runs, start with `visual-loop-qa` and route to at most two lenses.\n\n| If you want... | Summon... | Prompt starter |\n| --- | --- | --- |\n| product\u002Fpage intent before visual critique | `product-intent-observer` | \"Use codex-visual-builder-guild with the product-intent-observer lens. First define product intent, page intent, ideal route, success moment, and what design should make easier.\" |\n| a full visual QA loop | `visual-loop-qa` | \"Use codex-visual-builder-guild with the visual-loop-qa lens. Run the app, screenshot desktop, tablet, mobile, and one awkward in-between width, inspect with Codex App vision, delegate issues, fix, and compare before\u002Fafter.\" |\n| easier product flows | `user-flow-friction-auditor` | \"Use codex-visual-builder-guild with the user-flow-friction-auditor lens. Check whether a first-time user can tell where they are, what to do next, what happens after the action, and how to recover.\" |\n| custom UI art or product visuals | `imagegen-asset-director` | \"Use codex-visual-builder-guild with the imagegen-asset-director lens. Generate UI-ready assets that match this product, then integrate and screenshot them in context.\" |\n| mobile\u002Ftablet\u002Fdesktop confidence | `responsive-vision-auditor` | \"Use codex-visual-builder-guild with the responsive-vision-auditor lens. Check the layout across mobile, tablet, desktop, wide, and awkward fluid-breakpoint screens.\" |\n| hover, focus, modal, loading, and error polish | `interaction-state-inspector` | \"Use codex-visual-builder-guild with the interaction-state-inspector lens. Click through the main flows and inspect every important interaction state.\" |\n| consistent product taste | `brand-consistency-enforcer` | \"Use codex-visual-builder-guild with the brand-consistency-enforcer lens. Compare screens and enforce one coherent visual language.\" |\n| art-bible\u002Fcomponent-system compliance | `component-system-steward` | \"Use codex-visual-builder-guild with the component-system-steward lens. Find the project's art bible, tokens, and component rules; enforce them or create the smallest missing system contract.\" |\n| a reusable style guide | `art-bible-extractor` | \"Use codex-visual-builder-guild with the art-bible-extractor lens. Turn the best screenshots into an art bible.\" |\n| durable design tokens | `design-token-surgeon` | \"Use codex-visual-builder-guild with the design-token-surgeon lens. Extract repeated visual decisions into tokens and component contracts.\" |\n| before\u002Fafter safety | `screenshot-regression-guard` | \"Use codex-visual-builder-guild with the screenshot-regression-guard lens. Capture baselines and compare screenshots after changes.\" |\n| ugly real data testing | `real-content-layout-fuzzer` | \"Use codex-visual-builder-guild with the real-content-layout-fuzzer lens. Stress the UI with ugly realistic content.\" |\n| accessibility confidence | `visual-accessibility-sentinel` | \"Use codex-visual-builder-guild with the visual-accessibility-sentinel lens. Check contrast, focus, tap targets, color-only meaning, and motion sensitivity.\" |\n| visual variants | `ab-visual-lab` | \"Use codex-visual-builder-guild with the ab-visual-lab lens. Create three visual variants, screenshot them, compare them, and choose the winner.\" |\n| stronger hero sections | `hero-image-cinematographer` | \"Use codex-visual-builder-guild with the hero-image-cinematographer lens. Make the first viewport communicate the product immediately.\" |\n| calmer SaaS\u002Fadmin screens | `saas-dashboard-operator` | \"Use codex-visual-builder-guild with the saas-dashboard-operator lens. Make this dashboard dense, readable, scannable, and easy to operate repeatedly.\" |\n| game UI polish | `game-ui-polish` | \"Use codex-visual-builder-guild with the game-ui-polish lens. Review the HUD, inventory, stats, controls, and mobile layout like a player.\" |\n| motion and feedback | `motion-and-feedback-director` | \"Use codex-visual-builder-guild with the motion-and-feedback-director lens. Polish hover, loading, transitions, progress, and feedback.\" |\n| asset traceability | `asset-provenance-librarian` | \"Use codex-visual-builder-guild with the asset-provenance-librarian lens. Track generated assets, prompts, usage intent, and replacement notes.\" |\n\n## Delegation Map\n\n![Delegation map](assets\u002Fdelegation-map.png)\n\n`visual-loop-qa` is the guild captain. It does not try to solve every problem alone. It looks at the screenshot, names the failure class, and sends the right job to the right specialist.\n\n```mermaid\nflowchart TD\n  V[\"visual-loop-qa\"]\n  V --> Flow[\"user-flow-friction-auditor\"]\n  V --> Asset[\"imagegen-asset-director\"]\n  V --> Resp[\"responsive-vision-auditor\"]\n  V --> State[\"interaction-state-inspector\"]\n  V --> Brand[\"brand-consistency-enforcer\"]\n  V --> System[\"component-system-steward\"]\n  V --> Bible[\"art-bible-extractor\"]\n  V --> Tokens[\"design-token-surgeon\"]\n  V --> Regress[\"screenshot-regression-guard\"]\n  V --> Fuzz[\"real-content-layout-fuzzer\"]\n  V --> A11y[\"visual-accessibility-sentinel\"]\n\n  Asset --> Provenance[\"asset-provenance-librarian\"]\n  Flow --> State\n  Flow --> System\n  State --> Motion[\"motion-and-feedback-director\"]\n  System --> Bible\n  System --> Tokens\n  Bible --> Tokens\n  Fuzz --> Resp\n  A11y --> State\n```\n\nEvery handoff uses H70-C+ `delegates_version: 2` contracts:\n\n- `pass_context`: what the specialist receives\n- `expect_back`: what the specialist must return\n- `sla`: whether the handoff is synchronous or async\n\nFor native Codex runs, the wrapper now uses the same idea as a visible **vision-backed handoff packet**. The packet must come from Codex App vision inspecting a real screenshot or rendered state. Filenames, DOM metrics, tests, and source reads can support the packet, but they cannot replace the vision observation.\n\n```text\nfrom lens -> to lens\nvision source: screenshot path plus viewport\u002Fstate inspected\nvision observation: what Codex actually saw in the image\nsupporting evidence: optional DOM metric, test result, or source-code fact\nfinding: the visible problem or rule discovered from vision\ndecision: fix now, verify after fix, or keep as residual risk\nnext vision check: the screenshot, interaction, or content case the next lens must inspect with vision\n```\n\nThis keeps the guild from becoming ceremony. A responsive finding can hand off to interaction-state checks, ugly real content can hand off to responsive review, onboarding\u002Fworkflow changes can hand off to interaction review, and accepted visual changes can hand off to screenshot-regression guardrails. If the next lens would not change a decision, screenshot, vision observation, test, or rule, stop.\n\n## Specialist Wing\n\n![Specialist wing](assets\u002Fspecialist-wing.png)\n\nThe delegation map shows the core routing. The specialist wing rounds out the full 19-skill roster with the skills that tend to activate after a visual issue becomes more specific.\n\nThe point is simple: one big vague prompt like \"make it look better\" becomes a team of smaller, sharper jobs.\n\n## Three Ways To Use It\n\n![Use it in Codex, standalone YAML, or Spark Skill Graphs](assets\u002Fuse-it-two-ways.png)\n\n**Codex Desktop**: install `codex\u002Fcodex-visual-builder-guild` as a native Codex skill with `npm run install:codex`, then invoke it by name. This is the easiest path for most people.\n\n**Standalone YAML**: load any file in `design\u002F*.yaml` directly into an agent, prompt system, CLI tool, or custom runtime. Each H70-C+ skill is self-contained. This is the lightest path for agent builders.\n\n**Spark Skill Graphs**: copy the same files into a Spark Skill Graphs checkout. `design\u002F*.yaml` become graph nodes, `delegates` become graph edges, and `bundles\u002Fcodex-visual-builder-loop.yaml` becomes the recommended guild load order. This is the full graph\u002Fdashboard path.\n\nYou can ignore the Spark section if you only want the Codex Desktop skill. Spark is for people who want visible graph routing, dashboard inspection, or to reuse the H70-C+ YAML directly.\n\n## Install Into Spark Skill Graphs\n\nFrom this repo root:\n\n```powershell\nCopy-Item -Recurse -Force .\\design\\*.yaml C:\\Users\\USER\\Desktop\\spark-skill-graphs\\design\\\nCopy-Item -Force .\\bundles\\codex-visual-builder-loop.yaml C:\\Users\\USER\\Desktop\\spark-skill-graphs\\bundles\\\n```\n\nThen validate from `spark-skill-graphs`:\n\n```powershell\n$env:NODE_PATH='C:\\Users\\USER\\Desktop\\spawner-ui\\node_modules'\n$env:SPAWNER_H70_SKILLS_DIR='C:\\Users\\USER\\Desktop\\spark-skill-graphs\\design'\nnode C:\\Users\\USER\\Desktop\\spark-skill-graphs\\tools\\validate-h70-cplus.js\n```\n\nIf you use the Spark MCP server or dashboard, restart\u002Fre-index it after copying the files. Already-running MCP\u002Fdashboard processes may keep an older in-memory skill index and return `Skill not found` until restarted.\n\n## Tested Before Ship\n\n![Tested before ship](assets\u002Ftested-before-ship.png)\n\nThis package includes local checks for the parts that matter most:\n\n- H70-C+ structure\n- required 12-section coverage\n- embedded disaster detection commands\n- embedded anti-pattern detection\n- delegate contract completeness\n- bundle load order resolution\n- common Codex visual-loop invocation cues\n- Codex wrapper install and invocation coverage\n- beginner first-run documentation coverage\n- demo app presence\n\nValidate this package:\n\n```powershell\nnpm install\nnpm test\n```\n\nExpected result:\n\n```text\nValid H70-C+: 19\nInvalid: 0\nWith warnings: 0\nSmoke test passed\nUsage audit passed\n```\n\n## What Is Inside\n\n- `design\u002F*.yaml`: 19 H70-C+ design skills\n- `QUICKSTART.md`: the 30-second, 2-minute, 5-minute path for new users\n- `codex\u002Fcodex-visual-builder-guild\u002FSKILL.md`: native Codex wrapper skill\n- `bundles\u002Fcodex-visual-builder-loop.yaml`: recommended guild load order\n- `tools\u002Fvalidate-h70-cplus.js`: H70-C+ structure validator\n- `tools\u002Fsmoke-test.cjs`: practical package smoke test\n- `tools\u002Fusage-audit.cjs`: Codex install and invocation coverage audit\n- `tools\u002Finstall-codex-skill.cjs`: one-command Codex skill installer\n- `PROMPTS.md`: copy-paste prompts for the whole guild and each specialist\n- `assets\u002F*.png`: README and X-ready visual explainers\n\n## Infographic Set\n\n- `assets\u002Fhero-guild-banner.png`: X and README hero\n- `assets\u002Fwhat-you-get.png`: install value\n- `assets\u002Fhow-it-works.png`: visual builder loop\n- `assets\u002Fdelegation-map.png`: specialist routing\n- `assets\u002Fspecialist-wing.png`: remaining specialist roster\n- `assets\u002Fuse-it-two-ways.png`: Codex, standalone YAML, and Spark dashboard usage\n- `assets\u002Ftested-before-ship.png`: validation and trust\n","Codex Visual Builder Guild 是一个免费开源的H70-C+ Spark技能图谱集合，旨在通过图像生成、视觉审查等功能帮助Codex构建更美观的应用程序。项目采用JavaScript编写，具备自动检查间距、生成资源、移动端适配测试、可访问性评估以及将最佳设计转化为可复用规则的核心功能。适用于需要提升UI设计质量的开发场景，无论是个人开发者还是团队都可以利用此工具快速改善应用程序的视觉效果。MIT许可证授权，用户可以自由地克隆、修改和集成到自己的项目中。","2026-06-11 04:03:30","CREATED_QUERY"]