The Design Binary (aliased as $D) is a specialized command-line utility within the gstack ecosystem that bridges the gap between natural language design requirements and high-fidelity visual mockups. It leverages OpenAI's image generation and vision APIs to create UI variants, comparison boards, and design-to-code workflows.
The $D binary is primarily invoked by design-oriented skills such as /design-review, /design-shotgun, /design-html, and /design-consultation [design-review/SKILL.md:5-18]; [design-consultation/SKILL.md:5-18]. It allows the AI to "show, not tell" by generating real visual mockups from design briefs, ensuring that UI decisions are intentional rather than accidental.
Sources: [design/src/generate.ts:1-27], [design/src/variants.ts:1-20], [design/src/evolve.ts:1-6], [design/src/iterate.ts:1-7], [design/src/serve.ts:1-10]
The design system operates as a pipeline that transforms a Design Brief (Natural Language) into a Visual Artifact (Code/Image Space), which is then refined through a stateful feedback loop.
This diagram illustrates how the $D binary components interact with external AI services and local state.
Title: Design Binary Logic Flow
Sources: [design/src/variants.ts:140-154], [design/src/evolve.ts:23-52], [design/src/iterate.ts:23-60], [design/src/serve.ts:66-104], [design/src/generate.ts:117-131]
The iterate function manages the conversational design process [design/src/iterate.ts:23-23]. It first attempts to use the OpenAI previous_response_id for threading via the callWithThreading function [design/src/iterate.ts:33-43]. If threading fails (e.g., if visual context is lost), it falls back to a callFresh generation by accumulating the original brief and the last 5 feedback items into a single prompt via buildAccumulatedPrompt [design/src/iterate.ts:48-60].
The evolve mode bridges reality and imagination [design/src/evolve.ts:2-6]. It uses analyzeScreenshot to first process an existing UI screenshot through GPT-4o Vision [design/src/evolve.ts:111-151]. This textual analysis (layout, colors, typography) is combined with a new brief to generate a high-fidelity mockup that retains the structural essence of the original site while applying requested improvements [design/src/evolve.ts:39-52].
The generate function includes an optional quality gate via checkMockup [design/src/generate.ts:140-152]. This acts as an automated designer review, identifying issues before the mockup is presented to the user.
Title: Automated Quality Gate Sequence
Sources: [design/src/generate.ts:140-152], [design/src/cli.ts:134-144]
The serve function provides a stateful HTTP server to manage the comparison board and capture user feedback [design/src/serve.ts:1-10].
/api/feedback [design/src/serve.ts:109-115].submitted (final selection) and regenerate (requesting changes) [design/src/serve.ts:137-142].feedback.json or feedback-pending.json) so that the backgrounded agent can poll and respond to user actions [design/src/serve.ts:148-153]./api/reload endpoint allows the agent to swap in new board HTML after a regeneration round without the user needing to refresh [design/src/serve.ts:101-103], [design/src/serve.ts:184-198].Sources: [design/src/serve.ts:3-33], [design/src/serve.ts:134-179], [design/test/feedback-roundtrip.test.ts:132-179]
When variants is called, the system uses STYLE_VARIATIONS to explore different aesthetics (e.g., "Bold", "Minimal", "Playful", "Dark theme") [design/src/variants.ts:22-30]. To avoid OpenAI rate limits, requests are launched in a staggered parallel fashion with a 1.5s delay between each launch [design/src/variants.ts:162-181].
State is persisted to track design history and facilitate multi-turn feedback.
readSession: Loads the session JSON containing originalBrief, lastResponseId, and feedbackHistory [design/src/iterate.ts:25-25].updateSession: Appends new feedback and the latest responseId to maintain the thread [design/src/iterate.ts:67-68].Mockups and sessions are organized by project slug:
~/.gstack/projects/{repo_slug}/*-design-*.md [office-hours/SKILL.md:36-41], [design-consultation/SKILL.md:27-32].learnings.jsonl within the project's gstack home [plan-design-review/SKILL.md:79-82].Sources: [design/src/variants.ts:22-30], [design/src/iterate.ts:25-68], [office-hours/SKILL.md:112-122]
The $D binary's output serves as the "source of truth" for implementation.
prompt command uses generateDesignToCodePrompt to analyze a mockup and generate a detailed implementation plan for a developer [design/src/cli.ts:178-190]./design-review skill uses the generated artifacts to find visual inconsistencies and spacing issues, then iteratively fixes them in source code [design-review/SKILL.md:5-18]./design-consultation uses the binary to propose a complete design system and generates DESIGN.md [design-consultation/SKILL.md:5-18].Sources: [design/src/cli.ts:178-190], [design-review/SKILL.md:24-32], [design-consultation/SKILL.md:47-54]
Refresh this wiki