W01Static web design workflow

Compare the directions. Record the choice. Build the page.

This example plans and builds a one-page neighborhood repair-cafe site with no build step or remote dependencies.

Brief / three directions / decision / demonstration

The workflow separates art direction from implementation. It first defines the audience and content, compares three distinct visual approaches, records why one fits the brief, and then turns that decision into a local HTML, CSS, and JavaScript page.

Open the repair-cafe demonstration. Event facts not supplied by the brief remain visibly marked placeholders; the page does not present them as real details.

W02Source-defined task

The C# chain names the design process and the quality constraints the coding agent must follow. These fluent method names are recorded instructions, not a fixed catalog of builder methods.

Program.cs / excerpt

Builder.WithFile("AGENTS.md", options)
    .CreateOrReplaceAgentInstructionsForSmallStaticWebsiteDesign("AGENTS.md")
    .RequireAVisualThesisContentPlanAndInteractionThesisBeforeImplementation()
    .RequireThreeDistinctDesignDirectionsAndAReasonedSelectionAgainstTheBrief()
    .PreferSubjectSpecificTypographyCompositionColorTextureAndMotionOverGenericSaaSCards()
    .RequireSemanticHtmlKeyboardAccessVisibleFocusSufficientContrastResponsiveLayoutAndReducedMotion()
    .TreatMobileEmptyErrorLongContentAndNoJavaScriptStatesAsDesignedStates()
    .CreateOrReplaceDesignBrief("design/brief.md", repairCafeBrief)
    .CreateOrReplaceThreeDirectionComparison("design/directions.md")
    .CreateOrReplaceChosenDesignDecision("design/decision.md")
    .CreateOrReplaceDesignSystem("design/system.md")
    .CreateOrReplaceReviewChecklist("design/review-checklist.md")
    .BuildTheChosenDirectionAs("site/index.html", "site/style.css", "site/script.js")
    .UseOnlyLocalSemanticHtmlCssAndProgressiveJavaScript()
    .ValidateHtmlCssJavaScriptLocalLinksAndResponsiveBehaviorAsFarAsAvailableToolsAllow();

Read the complete Program.cs for the repair-cafe brief, source acknowledgements, and execution options.

W03Run safely

Use the complete repository checkout. This project links the shared builder source at ../../SuperIntelligenceBuilder.cs.

dry run

cd examples/static-web-design
dotnet build
dotnet run

The default command is a dry run. See the shared example steps for preview and live-run prerequisites.

live execution

dotnet run -- --yes,please,proceed

Because AGENTS.md already exists, a live run requires the exact reply yes, please proceed; no stops. Inspect the design and site diff afterward. The complete state table and consent scope are under Execution and completion.

W04Inspect the outputs

Output	Reader purpose
`AGENTS.md`	Maintenance rules for design decisions, accessibility, and honest content.
`brief.md`	Audience, required content, constraints, and unknown event facts.
`directions.md`	Three visual directions compared against the same brief.
`decision.md`	The reason “Mended Field Notes” was selected over blueprint and patchwork directions.
`system.md`	Reusable typography, color, spacing, texture, layout, and motion rules.
`review-checklist.md`	A review of content, semantics, keyboard use, contrast, responsiveness, and fallback states.
`site/`	The working local demonstration built from the recorded direction.

W05Basis and evidence

The source names Anthropic’s frontend-design skill as an influence for distinct art direction and Vercel’s web-design-guidelines skill as an influence for accessibility and interaction review. The generated material is specific to this brief and does not copy either skill.

The generating run reported and corrected an initial 3.64:1 accent contrast result, then measured the core palette at 4.72:1 or better. Local static checks also covered JavaScript syntax, HTML structure, local references, ARIA references, responsive rules, and reduced-motion behavior. A later browser audit is recorded separately in the validation record; static checks alone are not a complete usability or accessibility evaluation.