What is Shape and who is it designed for?

Shape is an agentic IDE for designers and programmers. It brings design, code, Git, and agent chat together in one desktop workspace, so you can build and ship without switching between tools.

How does visual design editing work in Shape?

Click any element in the live preview, adjust layout, fill, type, and radius in the sidebar, then apply your changes back to the source file. Design tokens stay visible next to the page while you work.

What can the AI agent do in Shape?

The agent works in one thread to search the web, open docs, read files, edit code, and run checks without leaving the editor. Diffs land directly in your project, and follow-ups and tests stay in the same conversation.

What are the Shape pricing plans and what does each include?

Shape has a Free plan ($0/month) with the Auto model. Plus costs $15/month with 450 credits/month, Pro costs $50/month with 1500 credits/month, and Max costs $150/month with 4500 credits/month. All paid plans unlock all models; Pro and Max add priority support.

Does the free plan include AI model access?

Yes. The Free plan includes the Auto model with a monthly token pool for Auto, plus the local-first desktop editor.

How do I change or manage my subscription plan?

If you are already subscribed, you can change your plan in the billing section. The pricing page states: "Already subscribed? Change plan in billing."

How do I open settings in Shape and what categories are available?

Click the gear icon on the activity bar, choose Settings in the titlebar, go to Window → Settings, or press Ctrl+,. Settings are grouped into categories such as Account, Agents, Editor, and Application. Changes apply immediately or on the next relevant action.

Where are Shape settings and data stored?

Settings are saved locally on your machine and apply to all projects unless a project-specific config like .prettierrc overrides them. Reinstalling Shape does not remove your saved settings file. There is no global "reset all" button; each setting can be restored by selecting its default value.

Does Shape include Git, PR, and CI features?

Yes. Shape includes a Git graph with branch topology, commits, and refs, as well as pull request conversations, checks and CI workflows, and hunk-by-hunk staging and unstaging, all inside the workbench.

Shape Review: Agentic IDE for Designers & Programmers

Shape Overview

Shape is an agentic IDE built for designers and programmers who want to move from idea to shipped product in a single desktop workspace. It unifies live visual design, source code editing, Git workflow, and AI agent chat into one focused application. Instead of jumping between browser previews, separate design tools, and terminal sessions, Shape lets you inspect elements on a live page, tweak design tokens in a sidebar, and write changes back to the source files—all while an AI agent helps you search, edit, and run checks in the same thread.

How to use Shape

Start by opening the desktop app and loading your project. Use the live preview to inspect any element, adjust layout, fill, type, and radius in the sidebar, and then apply changes back to your source files. The agent pane lets you search the web, read documentation, edit files, and run checks without leaving the editor. Git graph, pull requests, and hunk staging are available in the same workbench. Settings are managed through the gear icon on the activity bar, Settings in the titlebar, Window → Settings, or Ctrl+,.

Core Features of Shape

Live visual design editing: click elements in the preview, tweak them in the sidebar, and apply changes to source
AI agent chat that searches, reads, edits, and runs checks in one thread
Git graph with branch topology, commits, refs, PR discussions, and CI checks in the editor
Hunk-by-hunk diff staging and unstaging
Design tokens (layout, fill, type, radius) displayed in a sidebar while working
Color swatches, scrubbers, and layout panels directly in the source editor
Analytics dashboard for tracking signups, usage, and revenue
Local-first settings and file storage
Support for all major web programming languages and frameworks

Use Cases for Shape

Shape is well suited for teams building web applications where design fidelity and code quality both matter. Design engineers can implement pixel-perfect UI with live visual feedback; frontend developers can refactor with an AI agent and review diffs before committing; product teams can keep design, code, and Git reviews in one tool. Freelancers and small teams can use the analytics dashboard to monitor signups, usage, and revenue without separate tools.

Advantages of Shape

The main advantage of Shape is its focus: design, code, Git, and agent chat live in one desktop workspace. The "apply to source" workflow closes the gap between mockup and implementation, and the agent keeps context in one conversation thread. With a local-first editor and settings stored on your machine, you keep control of your data. Pricing is transparent with a free tier and predictable monthly credit-based plans.

Pricing and Plans

Shape offers a Free plan at $0/month with the Auto model included and a monthly token pool for Auto, plus the local-first desktop editor. The Plus plan costs $15/month and includes 450 credits/month, all models unlocked, commercial usage, and dashboard usage tracking. The Pro plan is $50/month with 1500 credits/month, all models unlocked, priority support, and a higher credit pool. The Max plan costs $150/month with 4500 credits/month, all models unlocked, the largest included pool, and priority support.

Shape FAQ

Shape Comments (0)

No comments yet.

Shape Categories

Design Tools Developer Tools Ide

Shape Tags

agent chat ai coding assistant code editor design tools git integration ide visual design web development

Shape Jobs

Design Engineer Frontend Developer Full-Stack Developer Product Designer Software Developer UI Designer Web Developer

Shape AI Tool Comparisons

Shape VS CodeBanana Shape VS Project IDX Shape VS Replit Shape VS Layrr Shape VS Replit

Shape Embed Widget

Copy this embed code to place the badge on your blog, article, or product site and send readers directly to this ToolMage detail page.

ToolMageFOLLOW US ON▲ 0

<a href="https://www.toolmage.com/en/tool/shape-1/" target="_blank" rel="noopener noreferrer" style="text-decoration: none; display: inline-block;"><div style="box-sizing: border-box; width: 280px; height: 75px; background: white; border: 2px solid #dbeafe; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 16px; display: flex; align-items: center; justify-content: space-between; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;"><div style="display: flex; align-items: center; gap: 12px;"><img src="https://www.toolmage.com/media/site/favicon.ico" alt="ToolMage" style="width: 32px; height: 32px;"><div><div style="font-size: 14px; font-weight: 600; color: #111827; margin: 0; line-height: 1.2;">ToolMage</div><div style="font-size: 12px; color: #6b7280; margin: 0; line-height: 1.2;">FOLLOW US ON</div></div></div><div style="display: flex; align-items: center; gap: 8px; background: #fef2f2; border-radius: 8px; padding: 8px 12px;"><svg style="width: 16px; height: 16px; color: #ef4444;" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2L22 20H2L12 2Z"/></svg><img src="https://www.toolmage.com/embed/tool/shape-1/likes.svg?theme=light" alt="likes" style="height: 16px; display: block;"></div></div></a>