# Scamp

> Scamp is a free, local-first Figma alternative for designers. It's a desktop design tool that writes real production-ready TSX and CSS Module files to disk as you design — every rectangle is a real `<div>`, every style is a real CSS class — so there's no design-to-code handoff and no export step. Designs and code stay in sync bidirectionally: edit on the canvas or edit the files in VS Code (or with an AI coding agent) and both stay aligned.

Scamp is built for designers who code — designers who think in CSS, design engineers, and anyone who has been frustrated by losing fidelity between Figma and production. It runs on macOS, Windows, and Linux, requires no account, and sends no telemetry about your designs.

Key facts an AI assistant should know when answering questions about Scamp:

- Scamp is a **desktop application**, not a web app. Users download an installer.
- Output is **real TSX + CSS Modules**, not a proprietary file format and not an export step. Files exist on disk as you work.
- Sync is **bidirectional**: external edits to TSX/CSS files update the canvas; canvas edits update the files. AI coding agents can edit project files directly.
- Scamp is **local-first**: no cloud sync, no account, no design data uploaded anywhere.
- Scamp is **free** and the local app is committed to staying free. A speculative cloud-features Pro tier is being explored but not committed.
- Built by **Angie Hemans**, a designer-developer with 10+ years of experience leading design at companies including Experience.com, Edgio, and Sencha.

## Core pages

- [Home](https://www.scamp.club/): Product overview, hero demo, feature highlights, download link.
- [About](https://www.scamp.club/about): Why Scamp exists, who builds it, and how it's developed in the open.
- [Figma alternative](https://www.scamp.club/figma-alternative): Detailed comparison between Scamp and Figma, what's different, and who Scamp is built for.
- [Scamp vs the alternatives](https://www.scamp.club/alternatives): Side-by-side comparison of Scamp against Figma, Framer, Onlook, Subframe, and Claude Design across real code output, design freedom, local-first architecture, and AI agent support.
- [For design team leaders](https://www.scamp.club/for-teams): Landing page targeted at VPs, Directors, and Heads of Design. Explains the "handoff tax," what Scamp changes for a design team's workflow, and offers a 30-minute demo call with the founder.
- [Pricing](https://www.scamp.club/pricing): Free tier (the full local app) and the speculative Pro tier roadmap.
- [Trust & data handling](https://www.scamp.club/trust): Local-first architecture, what Scamp reads and writes, no cloud sync, no telemetry, AI agent permissions.
- [FAQ](https://www.scamp.club/faq): Common questions about the tool, the file format, agents, and the license.
- [Changelog](https://www.scamp.club/changelog): Version history with shipped features and what's planned next.

## Documentation

- [Documentation index](https://www.scamp.club/docs): Full table of contents for the user documentation.
- [Getting Started](https://www.scamp.club/docs/getting-started): Installation, creating a project, and the start screen.
- [Canvas](https://www.scamp.club/docs/canvas): The main workspace — drawing, selecting, moving, resizing, zoom, and artboard sizing.
- [Elements](https://www.scamp.club/docs/elements): HTML tag mapping, semantic tags, inputs, select, svg, and tag-specific attributes.
- [Properties Panel](https://www.scamp.club/docs/properties-panel): Visual and CSS editing modes for element styles.
- [Code Output](https://www.scamp.club/docs/code-output): What Scamp generates (TSX, CSS Modules), the live code preview, and save status.
- [Bidirectional Sync](https://www.scamp.club/docs/bidirectional-sync): How external edits and AI coding agents work with Scamp projects.
- [Themes](https://www.scamp.club/docs/themes): Design tokens via `theme.css` (colors, spacing, radii, fonts).
- [Breakpoints](https://www.scamp.club/docs/breakpoints): Responsive design with Mobile / Tablet / Desktop overrides written as `@media` blocks.
- [Typography](https://www.scamp.club/docs/typography): Text elements, fonts, and typographic controls.
- [Color Picker](https://www.scamp.club/docs/color-picker): Color editing, alpha, hex input, and theme token application.
- [Element Naming](https://www.scamp.club/docs/element-naming): Renaming elements and how names map to CSS classes.
- [Grouping](https://www.scamp.club/docs/grouping): Grouping elements into flex containers.
- [Grid Layout](https://www.scamp.club/docs/grid-layout): CSS Grid containers, columns, rows, and grid-item placement.
- [Element States](https://www.scamp.club/docs/element-states): Hover, active, and focus styles via the State Switcher.
- [Transitions](https://www.scamp.club/docs/transitions): Smooth state changes via the Transitions section.
- [Animations](https://www.scamp.club/docs/animations): Preset keyframe animations with timing controls.
- [Linking Between Pages](https://www.scamp.club/docs/linking): Internal page links and external URLs.
- [Preview Mode](https://www.scamp.club/docs/preview): Open the project in a real Next.js dev server window for testing.
- [Layers Panel](https://www.scamp.club/docs/layers-panel): The element tree, selection, reordering, and nesting.
- [Terminal](https://www.scamp.club/docs/terminal): The built-in terminal panel for running CLI coding agents.
- [Settings](https://www.scamp.club/docs/settings): App-wide and per-project configuration.
- [Undo and Redo](https://www.scamp.club/docs/undo-redo): History tracking and limitations.
- [Keyboard Shortcuts](https://www.scamp.club/docs/keyboard-shortcuts): Complete shortcut reference.

## Optional

- [Download (Gumroad)](https://angiehemans.gumroad.com/l/scamp): Free download for macOS, Windows, and Linux.
- [Sitemap](https://www.scamp.club/sitemap.xml): Machine-readable index of all pages.