Skip to main content
All cases

Build a functional website from scratch

1.1. Use Case Name​

Build a functional website from scratch

1.2. Tags​

Agent

1.3. Introduction​

This use case describes how to use CodeVista to build a News Website Home page to showcase web-building capability: a two-column layout with a "light" left sidebar (minimal text, mostly frames/placeholders) and a main lead article on the right (category pill, large headline, meta, hero image, summary, CTA). The result is used as a demo for the Agents scenario.

1.4. Outcome​

  • High-Fidelity Prototype: A fully styled news website with specific UI components (category pills, main lead articles, etc.).
  • Responsive Layout: A functional structure that adapts to different screen sizes.
  • Instant Deployment: Ready-to-preview code that showcases CodeVista's web-building efficiency.

1.5. Starter Prompt​

You are CodeVista. Create a News Website Home page to showcase web building capability.

Layout (desktop):
- Two columns:
  - Left: a "light" sidebar (minimal text, mostly placeholder/skeleton blocks; 3–5 blocks).
  - Right: a Main Lead Article component containing:
    1) Category pill above headline (example: "World", soft pink/grey background, dark red/grey text)
    2) Very large bold headline, clamp ~2 lines on desktop
    3) Meta line: author/source + published date (+ optional reading time)
    4) Hero image (with alt; fallback placeholder if missing)
    5) Summary/excerpt 2–3 lines
    6) CTA link/button: "Read more"

Requirements:
- Responsive: on mobile switch to one column (lead full width; sidebar stacked).
- Include loading skeleton and empty state.
- Provide mock data (leadArticle + sidebarBlocks) and clearly map fields to UI.
- Output complete runnable code for the page/components + styles (Tailwind or CSS) and brief run instructions.
Keep UI clean and modern with news-like typography.

1.6. Inputs Required​

  • Framework/stack: (e.g., Next.js + React, Vue, Angular; Tailwind/CSS/SCSS).
  • Routing convention: Home path (/) and (if applicable) article detail path (/article/[slug]).
  • Data source:
    • Mock data (default) or an API endpoint/CMS schema.
  • UI options (optional):
    • Font/color theme.
    • Which sidebar blocks to include (Trending/Topics/Newsletter/Ads placeholder, etc.).
  • Asset policy:
    • Use real image URLs or placeholder images.

1.7. Prerequisites​

  • CodeVista Prototyper or Agent mode must be active.
  • Clear understanding of the desired page hierarchy (header, main content, sidebar).

1.8. How to Use​

  1. Open CodeVista → select Agent tab.
  2. Paste the Starter Prompt (use the code block's copy button for quick copy) and click send.
  3. Run the command.