If you come across an unfamiliar term in the docs or the app, you can find a quick explanation here. Understanding these concepts will help you get the most out of Shaper’s design-to-code workflow.

​
Shapes

Shapes are the basic building blocks in Shaper’s canvas. A shape can be any UI element – for example, a text box, an image, a button, or a container frame. You add shapes to your artboard to build your design. Each shape corresponds to real code under the hood (e.g. a button shape might be a <button> element in code). In short, if you can see it on the canvas, it’s a shape. (This is similar to “layers” or elements in other design tools.)

​
Artboards

An Artboard is the design canvas that represents a screen or page in your project. Artboards in Shaper are like frames where you arrange your Shapes. You can have multiple artboards (pages) in a project (e.g. a Home screen, a Dashboard screen, etc.). Each artboard can have a defined size or responsive breakpoints (you can toggle device previews for an artboard using the top bar controls). Artboards help you organize different screens of your application. When you preview or publish your project, each artboard corresponds to a real page/route in the deployed app.

​
Components

Components in Shaper are reusable UI elements or groups of elements. If you have a design element that you’ll use in multiple places (like a navigation bar, footer, or a feature card), you can convert it into a Component. Once it’s a component, you can insert multiple instances of it across your project. Edit the master component, and all instances update, keeping your design consistent. In code terms, components correspond to reusable React components. Shaper lets you define components once and reuse them without duplicating effort, which keeps both design and code DRY (Don’t Repeat Yourself)file-fspyg3vwn4rr9iysbzzdfp.

​
Tokens

Tokens (design tokens) are named design values for consistent styling, such as colors, fonts, spacings, and other UI constants. In Shaper, you can define tokens (for example, a primary brand color, or a standard spacing unit) and then apply those tokens to your shapes’ styles. If you update a token’s value, every element using that token updates automatically. Tokens ensure consistency across your design and are Git-synced with your codebase – they live in code (often as variables in a theme or style file) and are version-controlledfile-fspyg3vwn4rr9iysbzzdfp. This means designers and developers share the same design constants, and there’s no mismatch between the values in the design vs. the code.

​
Two-Way Sync

Two-way sync is the live link between Shaper’s design editor and your code repository. Shaper is Git-native – when you connect a project to GitHub, any change you make visually in Shaper generates real code updates (commits) in the repo. Conversely, if a developer modifies the UI code in the repository, those changes can be pulled back into Shaper’s visual editor. In essence, design and code stay in continuous alignment. Two-way sync eliminates the traditional handoff; designers and developers are always looking at the same source of truth. This concept is core to Shaper: it’s not a one-time export, but a persistent integration between the design tool and the codebase.

​
Prompts (AI Generation)

Prompts refer to Shaper’s AI-powered “design from description” feature. Instead of manually constructing every element, you can type a description of the UI you want and let Shaper generate it for you. For example, you could write a prompt like “Form with two input fields and a submit button,” and Shaper will create that form layout on your canvas (complete with underlying code). The generated design is fully editable – you can adjust anything the AI created. Prompts are a fast way to get starting points or to automate routine parts of your design. They harness AI to speed up the design-to-code process, while keeping you in control to tweak the results.

​
AI Prompting vs. Manual Editing

Shaper offers the best of both worlds: AI prompting and manual editing. With AI prompting, you can describe a feature or page in natural language and let Shaper build a first pass for you – great for quick drafts or inspiration. With manual editing, you have pixel-level control, dragging and styling shapes to get everything exactly right. Importantly, these two workflows are intertwined: you might generate a layout with a prompt, then refine it by hand; or you could design something manually and later use a prompt to extend it. Because Shaper keeps design and code unified, there’s no difference in quality between AI-generated and hand-created designs – both are real, editable UI. You can always fine-tune AI output by hand, and you can speed up manual work with AI. Shaper’s platform is designed to let you seamlessly switch between these modes to suit your needs, without ever leaving the tool.