Communitygithub.com

Silicon interface build

Implement and visually verify a website or app interface from the product's design direction, including responsive layouts, states, and the components that already exist.

What is Silicon interface build?

Silicon interface build is the build step in the Silicon Design set. The agent reads DESIGN.md, the current UI, the component library, assets and real copy, then implements a representative slice of a website or app: who it is for, the task, the primary information and the next action. It stays inside the requested scope, uses the product's own material, and labels anything fictional. It does not invent testimonials, customer logos or metrics. The pass is finished only after the built screen is looked at, not when the code merely matches a checklist.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/drevendev/Silicon-Design/tree/master/skills/silicon-interface-build

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

What does Silicon interface build do?

Carry design intent into working behavior. Inspect the product's DESIGN.md, framework, current UI, components, assets and content before editing. Keep changes within the requested scope. For a small correction, follow the existing direction; for missing direction on a major build, establish a concise provisional direction from the brief.

Build a representative slice

Identify the person, task, primary information and next action. Use representative content from the product; label fictional fixtures and prototype actions. Do not manufacture testimonials, customer logos, measurements or successful integrations.

Choose structure according to content: prose for reading, rows or tables for comparison, cards for independent objects. A website should make its promise and evidence understandable; an app should expose the work and state that support an action. Preserve reliable component semantics while adapting the visual system.

Implement one complete flow with an adverse state before spreading styling across the product. Include relevant loading, empty, error, unavailable and success feedback. Preserve useful input on recoverable errors and explain unavailable actions. Use semantic controls and persistent labels.

Establish coherent type, color and spacing roles. Use assets for a specific information or identity purpose, with suitable rights and text alternatives. Keep critical content independent of decorative motion and audio.

Carry the chosen direction beyond the first screen into the task, an adverse state and a result where in scope. Include a product-specific detail in wording, visual relationships or behavior. Preserve context, explain why a collection is empty, and keep repeated actions efficient. Finish wrapping, optical alignment, crops, icon weight, units and feedback as a distinct craft pass. Do not add out-of-scope features merely to create a memorable moment.

Inspect the result

Open the actual implementation in a browser when available. Inspect narrow, intermediate and wide layouts, content extremes and supported themes/languages. Fix overflow, weak hierarchy, awkward wrapping and incomplete states before micro-polish.

Exercise keyboard navigation, focus and a complete task/recovery path. Check relevant contrast pairs, text enlargement and reduced-motion behavior. Distinguish viewport resizing from actual browser zoom and screenshots from input testing. Run project checks appropriate to the change; do not add tests that merely repeat styling choices.

If a browser/runtime is unavailable, perform useful source checks and explicitly report that rendered behavior remains unverified. Do not replace evidence with a claim that the UI looks correct.

Assess operation and character separately. Point to what makes the result specific and coherent, inspect the interior as well as the introduction, and walk through repeated use for recurring interruptions. A passed build or contrast check does not answer these design questions. Treat emotional effects and memorability as hypotheses unless actual audience observations support them.

Deliver the implemented flow, changed surfaces, rendered evidence where available, checks performed and remaining limits. Continue fixing observed issues within scope until the flow meets its criteria.

Optional depth: Silicon Design review checklist.

Related Skills