SiSkill Explore Skills Free Skills Pricing Installation guide

Gallery Architecture Design

Let the work lead. Make the archive easy to explore.

For architecture studios, interior practices and spatial portfolios. Left-rail project index, large uncropped architecture plate, restrained sans typography and thin archive rules. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project.

Gallery Architecture Design

Available now · v1.0.0

USD 9.99 · Single purchase, or get access through Pro.

What would you like to make?

Build a FIELDWORK / STUDIO-style concept

I have approved product copy and want this visual direction for a new page.

An original page with your copy, design tokens, image brief and responsive starter files.

Restyle an existing page

Keep my existing routes and features, but give this one page a consistent visual identity.

A focused visual patch and scoped tokens that fit your project framework.

Adapt the built-in interaction

Use my real items and text in the included an accessible project-type filter with an empty state.

Editable fields and local browser behavior with keyboard, invalid-input or empty-result checks.

FIELDWORK / STUDIO · from visual direction to editable page

AI-generated design concept · not a runtime screenshot

FIELDWORK / STUDIO · from visual direction to editable page
The shown concept is an AI-generated bitmap; the other gallery images are actual starter screenshots. The package includes the editable page generator, rules and original sample media.

The input

An original fictional brief for FIELDWORK / STUDIO: Selected fictional studies in homes, public rooms and adaptive reuse.

The work

Codex image generation creates the concept and separate hero artwork. The included starter builds a real page with the same design rules. Compare the labeled gallery images.

Browse all output examples
  • AI design concept · FIELDWORK / STUDIO — Created with Codex image generation for an original fictional brief. This bitmap demonstrates visual direction; compare the separate starter output before buying.
  • Actual starter output · English — Browser screenshot of the shipped local generator with its included example and generated hero asset. Editable HTML/CSS/JS, rather than a flattened screenshot. Functional demo: an accessible project-type filter with an empty state.
  • Actual starter output · Chinese — The same executable starter with Chinese content. Mobile menu, anchors and FAQ are functional; product services require integration. Local selections/calculations only; no business service is connected.

From your material to the finished files

  1. Lock the visual direction

    Read the design rules and choose what supports your product: Left-rail project index, large uncropped architecture plate, restrained sans typography and thin archive rules. Use the generated reference to discuss the image, not to infer app behavior.

  2. Build with your real material

    Give the Agent your copy and media. It can run the included Node starter for a new page or adapt your existing components. Generate new subject imagery only when a tool is available.

  3. Inspect the actual page

    Open the real output and test an accessible project-type filter with an empty state. Check keyboard focus and mobile wrapping; verify invalid inputs or empty results where applicable. Replace fictional examples and integrate business services separately.

Bring this task into your Agent

Prepare these materials

Bring product/room/project names, a short approved description for each, your audience and primary action. Architecture examples also need a category per project. Use your own authorized photos or generate new hero imagery with your available tools.

  1. Sign in to acquire the package.
  2. Extract the entire folder into your project: .agents/skills/gallery-architecture-design/SKILL.md (Codex) or .claude/skills/gallery-architecture-design/SKILL.md (Claude Code).
  3. Open a new chat in that project, attach your materials and replace the bracketed fields in the brief below. Ask the Agent to check package instructions and dependencies first.

Use $gallery-architecture-design for my [product] aimed at [audience]. The goal is [main action]. Read its DESIGN.md, use my attached copy and assets, and build a responsive page. Explain the image direction, generate assets only with available tools, preserve all facts, and deliver editable HTML/CSS/JS with desktop/mobile checks. Do not publish yet.

Installation & troubleshooting guide

The first result can be revised

Keep the chosen palette and visual hierarchy. Change only the hero copy and one approved image, then recheck mobile wrapping and focus contrast.

What the package includes

  • A project-ready DESIGN.md, semantic tokens.css, composition rules and asset briefs.
  • A real browser interaction: an accessible project-type filter with an empty state. No server or account required for the local demo.
  • Responsive HTML/CSS/JS with original demo media, editable JSON brief and a review checklist.

What you provide separately

  • Your own Codex or Claude Code access. The starter requires Node.js 22+ and a browser, with no npm packages.
  • New images require an available image tool and your own credits. Existing apps retain their own framework dependencies.

Before you start

Which part actually works in the starter?

The included an accessible project-type filter with an empty state runs locally in your browser. There is no checkout, inventory, reservation system or message delivery. AI concepts may show broader visual ideas; inspect the separately labeled runtime screenshots for the shipped output.

Will the package produce the concept image exactly?

No. The concept communicates art direction. The real starter output is shown separately, and your Agent adapts copy, images and components to your project. Exact image-generation results vary.

Is this a repackaged Refero file?

No. The instructions, tokens, templates and examples are newly authored by SiSkill. Refero is a research reference; its source documents, code, screenshots, fonts and brand assets are not included.

AI concept images illustrate art direction; they are not runtime screenshots or a promise of identical results. The separate starter screenshots show actual package output. Includes a static prototype, not authentication, checkout, analytics or a backend. Original SiSkill product; no affiliation with Refero or reference brands. Model and image-generation costs are separate.

More to make

  • Botanical Skincare Design — For independent skincare and personal-care brands. Botanical product still life, sage panels, large upright serif, quiet ruled product choices. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project. Includes product options with a live selected-product summary.
  • Boutique Stay Design — For boutique stays, guesthouses and independent hospitality brands. Panoramic coastal architecture, airy serif headings, bone-colored booking inquiry panel and horizontal room index. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project. Includes room comparison with a live inquiry summary.
  • Specialty Coffee Design — For specialty roasters, coffee shops and small food brands. Warm oat and rust bands, bold utilitarian headlines, monospaced roast labels and generous pill controls. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project. Includes a coffee-to-water ratio calculator with input validation.
  • Waitlist Landing Page — Create a responsive prelaunch page with a product story, FAQ and clearly labeled local demo form. Includes editable source and desktop/mobile previews.