Chat tips
The chat panel is the most direct way to communicate with Coframe Agent. What you write shapes how the agent plans, builds, and tests your changes. Better prompts lead to faster, more accurate results.
Good vs. bad messages
Section titled “Good vs. bad messages”✓ Good: specific and outcome-focused
Section titled “✓ Good: specific and outcome-focused”“Make the hero headline 48px, serif font, with 8rem top/bottom padding. Keep the existing CTA button but change its background to #22c55e.”
Why it works: the agent knows exactly what to change, what values to use, and what to preserve.
✓ Good: intent with constraints
Section titled “✓ Good: intent with constraints”“Add a pricing table below the hero. Three tiers: Free, Pro, Enterprise. Use the existing card component. Don’t change anything above the fold.”
Why it works: clear deliverable, concrete details, and explicit boundaries.
✗ Bad: vague
Section titled “✗ Bad: vague”“Make it look better.”
Why it fails: the agent has no criteria for “better” and will make arbitrary choices.
✗ Bad: too many changes at once
Section titled “✗ Bad: too many changes at once”“Redesign the whole page — new hero, new nav, new footer, add a blog section, change all the fonts, update the color scheme, and add animations.”
Why it fails: overwhelming scope leads to unfocused work. Break this into separate requests.
Tips for effective prompts
Section titled “Tips for effective prompts”Start with the outcome
Section titled “Start with the outcome”Say what you want the result to look like, not the steps to get there. The agent handles implementation.
Instead of: “Open Hero.tsx, find the h1 tag, change the class to text-5xl”
Write: “Make the hero headline larger — around 48px.”
Reference specific elements
Section titled “Reference specific elements”Use names the agent can find in the code — component names, section headings, CSS classes.
“The pricing cards in the
PricingSectioncomponent” is better than “those boxes in the middle of the page.”
State what should NOT change
Section titled “State what should NOT change”Constraints prevent the agent from making unwanted changes elsewhere.
“Update the footer layout but don’t touch the navigation or hero section.”
Give examples when helpful
Section titled “Give examples when helpful”If you have a reference, share it:
“Style the testimonials section like the cards on stripe.com/customers — photo on the left, quote on the right, light gray background.”
Break large changes into steps
Section titled “Break large changes into steps”Instead of one massive request, send a series of focused messages:
- “First, redesign the hero section with more whitespace.”
- (review the result)
- “Now add a pricing table below it.”
- (review again)
- “Finally, update the footer to match the new style.”
Each step gives you a chance to review and course-correct before moving on.
Follow up with refinements
Section titled “Follow up with refinements”After seeing the result, you can adjust:
“The gradient is too dark on mobile — lighten it by 20%.”
“Move the CTA button above the pricing table, not below it.”
Small, specific follow-ups are faster than re-explaining the whole change.