The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
What if your team could design, iterate, and deploy entire products without ever leaving a Slack thread?
š That's Paper Builder.
It follows your team's conversation, generates the product you're envisioning on Paper, and deploys it on Vercel. Directly in the Slack channel.
From single pages to entire flows, by using your design system.
Just tag Paper Builder in the thread.
Under the hood, a Python server orchestrates three flows:
1. š The Intent Detection Flow: Claude CLI
- Agent 1 reads the Slack thread and classifies the request as design or deploy.
2. šØ The Design Flow: Claude CLI ā Paper MCP
- The server checks if a design system folder exists in the project.
- Agent 2 checks if a design system exists on the Paper canvas.
- Agent 3 uses the Paper MCP to build or refine the UI, applying the design system tokens
š Paper MCP tools used:
+ get_guide: To load design-specific instructions.
+ get_basic_info: To understand the current canvas state.
+ write_html & update_styles: To create and edit visual elements.
+ get_screenshot: To capture the design for Slack review.
+ finish_working_on_nodes: To finalise the session on Paper.
3. āļø The Deploy Flow: Claude CLI (ā Paper MCP) ā React/Vite ā Vercel
- Agent 4 exports the artboards as React components and image assets.
- Agent 5 wires the navigation between screens and prepares the app for deployment.
š Paper MCP tools used:
+ get_jsx: To transform canvas components into React components.
+ get_computed_styles: To extract exact CSS tokens from the artboards.
+ get_fill_image: To download icons and images for the local bundle.
It's open source, run it yourself and share your feedback:
https://github.com/valeeff/paper_builder_on_slack
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
I built something wild for the Paper Challengeš
It turns any GitHub repo into a visual case study ā instantly.
No writing. No designing.
Just drop a repo linkā¦ and the canvas builds itself.
Thatās CodeSagešÆ
Most devs have solid projectsā¦
but theyāre buried in README files nobody reads.
CodeSage changes that.
It reads your actual code ā architecture, stack, commits ā
and transforms it into a clean, dark, presentation-ready case study.
The real unlock?
Paper MCP.
I connected my AI agent directly to the canvas.
So instead of designing manuallyā¦
the agent builds everything:
ā¢ Sections
ā¢ Layout
ā¢ Insights
ā¢ Structure
All generated directly on the canvas.
No drag. No drop.
Just output.
Pick any repo ā get 3 analysis modes:
*Each one gives
ā Complexity score
ā PR velocity
ā Language breakdown
ā Full Refactor Roadmap
Try CodeSage: https://codesage-871524277866.us-central1.run.app/
Tech stack:
Paper MCP Ā· Gemini API Ā· GitHub API Ā· Antigravity
Great concept š„
Building a Zero-Touch Design Feedback Loop with Slack and the @Paper MCP
What if you never had to manually process a minor design revision again? As designers and developers, we easily waste 30% of our week fulfilling fast client requestsāchanging button colors, adjusting typography, or tweaking padding. I decided to completely automate this process.
In this project, I engineered an autonomous AI-driven workflow that physically alters native UI designs based on conversational Slack messages, proving the massive potential of the Paper MCP.
āØ The Power of the Paper MCP:Ā Historically, AI agents have struggled to actually "see" or edit design files. By deploying theĀ Paper MCP, I gave a raw Large Language Model the ability to programmatically traverse a 2D design canvas.
The Setup:Ā I design the initial UI (like a Login Page) using Paper and post the screenshot to the client's Slack channel.
The Trigger:Ā The client requests changes natively in Slack by mentioning a customĀ @DesignBotĀ (e.g.,Ā "Make the login button green and change the title to 'Welcome'").
The Execution:Ā Instead of guessing layout geometry, the AI uses the Paper MCP to dynamically query the canvas, isolate the precise target node, and duplicate the master to create a protected variant. It aligns the new design on the canvas grid and updates the styling properties natively.
The Delivery:Ā The MCP server intercepts the final render state and pushes a flawlessly formatted screenshot right back into the Slack thread.
š ļø Technical Stack Used:
Paper MCP:Ā The absolute core of the project, enabling rigorous JSON-RPC access to native design layers, text bounds, and styling hooks.
Slack Bolt (Socket Mode):Ā For threading logic, instant reaction processing, and conversational memory.
Agentic LLM Engine:Ā Used native OpenAI tool-calling to map the complex MCP schemas directly into the AIās brain so it never hallucinates commands.
The Result:Ā Clients experience magical, instantaneous visual revisions directly inside their communication channels, while designers and developers win back hours of completely uninterrupted, deep-focus work.
Check out the video demo below to see the AI leverage Paper MCP to parse a layer tree and dynamically manipulate the UI!
ā¢ Apr 18
This is the kind of workflow that quietly kills 30% of design busywork š
My solution is about closing the gap between design and code with designing real, fully working components.
I designed a Contra-inspired profile card in Paper, then built a workflow that turns it into real, working React components.
The workflow in 3 steps:
ā Creating aĀ contra.comĀ style guide inside Paper, then asking it to create a copy of the profile card. Then making some refinement using the canvas and the design tools (I even added some new functionalities to the card, e.g. the fun fact section)
ā Paper design ā component spec. My Claude skill reads the Paper file, including component states and the written explanations you might attached to your design, and writes a structured markdown specification with a component tree and these specs: appearance, user interactions, states, required input data.
ā Spec ā working components. A second Claude skill generates real React components in Storybook and verifies each one against the Paper design until it matches: typography, colors, spacing, states.
(Btw. Storybook is a living catalog of your product's UI components, where each one runs in the browser as a real, interactive preview, so designers can click through every state and variation exactly as users will experience it, without waiting for the full app to be built around it.)
If you donāt design something, someone else (an AI, a developer) will. (Itās not necessarily a bad thing, but you need to be deliberate about what parts you want to outsource.)
With this workflow, you get to review and complete your design at two points:
ā first, when you get the detailed specification: you can take a quick look at it and fill in the gaps if needed
ā second, when you can play around with the live, fully coded components inside Storybook. You can also run tests to check e.g. whether the component is accessible or not.
With these two review steps built in, you can be sure that your design intent truly gets translated to code.
You can modify the spec, tweak the design in Paper, regenerate the components, and iterate until the result matches what you actually had in mind. No more redlining screenshots or re-explaining hover states in Slack.
Tools: Paper, Claude Code, Storybook, React.
MCP Servers: Paper, Storybook, Chrome DevTools
(Btw. I also created the slide deck inside Paper using Claude from VS Code)
I'll be open-sourcing both Claude skills and the full workflow in the coming days, so you can use it in your own projects and start closing the gap between design and code the same way. Stay tuned!
Thanks for the challenge @Stephen Haney @Contra HQ
Trending
Runway
AI video generation is exploding. What are you dreaming up in Runway?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid.Ā Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. Whatās yours right now?