# Website content studio

Source: https://refyneit.com/prompts/website-content-studio

A polished section-by-section workspace for planning, drafting, and reviewing a personal site.

## When to use it

It defines hierarchy, states, interaction, content quality, and verification—enough direction for a coding agent to produce a coherent product surface instead of a static mockup.

## Prompt

Build a polished website content studio for [AUDIENCE] inside this app.

First inspect the existing design system, routing, data patterns, and repository guidance. Reuse established components and tokens.

Create a responsive three-part workspace:
- a compact project rail showing site sections and completion status;
- a focused canvas for the selected section with goal, draft, notes, and preview modes;
- a progress area that makes the next useful action obvious.

Use realistic seed content for [SITE OR BRAND], not lorem ipsum. Establish an editorial visual language with calm neutrals, one restrained accent, strong typographic hierarchy, generous space, and crisp dividers. Preserve context while switching sections. Include empty, saving, saved, and validation-error states; keyboard navigation; visible focus; and accessible labels.

Implement meaningful interactions: add/reorder sections, edit a draft, mark a section ready, and switch between draft and preview. Keep controls quiet until relevant. Avoid copying source branding or exact content.

Verify the finished route at desktop and mobile widths. Confirm no horizontal overflow, keyboard reachability, and working state transitions. Finish with the route, files changed, checks run, and one screenshot of each viewport.

## Adaptation and provenance

Adapted from Site Studio's planning-and-drafting canvas. The source preview is structural inspiration; branding and copy should remain original.

Contributor: [@ayangupt](https://github.com/ayangupt)
Repository: https://github.com/github/awesome-copilot
Pinned commit: b95e24caae4f25c5985f8527fd092ccfed039c36
License: [MIT](https://github.com/github/awesome-copilot/blob/b95e24caae4f25c5985f8527fd092ccfed039c36/LICENSE)
- [extension](https://github.com/github/awesome-copilot/blob/b95e24caae4f25c5985f8527fd092ccfed039c36/extensions/site-studio/extension.mjs)
- [preview](https://github.com/github/awesome-copilot/blob/b95e24caae4f25c5985f8527fd092ccfed039c36/extensions/site-studio/assets/preview.png)
Review: output-reviewed, 2026-08-23. Reviewed the commit-pinned implementation and its committed preview image. The preview is representative source output, not a claim that this adapted prompt reproduces it pixel-for-pixel.
Reviewed output: https://refyneit.com/prompt-outputs/site-studio.png
Output source: https://github.com/github/awesome-copilot/blob/b95e24caae4f25c5985f8527fd092ccfed039c36/extensions/site-studio/assets/preview.png
Representative output committed by @ayangupt in github/awesome-copilot, reviewed at b95e24ca.