Wikicasa design

Interactive mockups for the Wikicasa redesign. They use mock data and aren't production code.

Status: draft

Design system

The tokens, guidelines and components every mockup is built from.

tokens
85
Ds components
2
library components
39
contrast issues to fix
5

How it works

Commands go in Claude Code, not in this page.

  1. Start an areaPick an area of the site and ask Claude to start it. Each area can hold as many mockups as you need.
    /new-domain
  2. Design with ClaudeDescribe what you want. Claude builds it from the library and the design system, with every state, errors included.
  3. ReviewAsk for a UI/UX and error-states review before you share.
    ui-ux-reviewererror-states-reviewer
  4. ShareSay "condividi il lavoro": Claude checks everything and opens a pull request for review.
    share

Mockups by domain

1 of 8 areas started. Each area mirrors a part of today's site.

  • Search

    1 mockup
    Example domain: the search results page, built from library components (BaseCard, BaseButton, BasePagination, BaseShimmerLoader) and the design system, with mock data covering results, no results, loading, no photo, long titles and price on request. Copy its patterns when you start a new domain.
  • HomeThe homepage and its search entry pointNot started. In Claude Code:
    /new-domain home
  • ListingThe detail page of a propertyNot started. In Claude Code:
    /new-domain listing
  • AgencyAgency profiles and their listingsNot started. In Claude Code:
    /new-domain agency
  • UserAccount, favorites and saved searchesNot started. In Claude Code:
    /new-domain user
  • ValuationEstimating what a home is worthNot started. In Claude Code:
    /new-domain valuation
  • PublishPrivate sellers publishing a listingNot started. In Claude Code:
    /new-domain publish
  • MarketPrices and trends by areaNot started. In Claude Code:
    /new-domain market

Library proposals

Changes to @wikicasa-dev/* that devs review before anything is released.

None yet.