Build with Claude or Codex. Create the visuals with Rubiic.

Your frontend is starting to work. Claude Code or Codex has built the navigation, connected the forms and made the layout responsive. Now the app needs an identity: a logo in the header, something useful in the hero, and illustrations that help people understand what to do next.

Connect Rubiic through MCP and you can brief those assets from the conversation where you are building the app. Your coding assistant carries the product context into Rubiic, brings back the results for review, and integrates the exported files into the frontend. You can start with a still image and add motion where it explains something.

The logo revisions and connection animation below are real assets we made with Rubiic. The appointment-booking app is an illustrative project; its prompts are examples to adapt in Claude Code or Codex.

Start with the places your frontend needs assets

Before generating anything, ask your coding assistant to identify the placements. A logo has to survive a small navigation bar. A hero animation has more space, but still needs to make sense on a phone. An empty-state illustration should help someone take their first step.

We are building an appointment-booking app. Review the current frontend and propose an asset list: a logo, a hero animation showing the booking flow, three feature illustrations, and an empty-state graphic for a new account. For each, include its placement, displayed size, background, purpose and export format. Use the app's actual colors and labels.

Keep the working interface as the source of truth. If rescheduling is not implemented, leave it out of the animation. Keep headlines, buttons and essential instructions in HTML so the app remains usable without playing or loading any media.

Connect Rubiic to Claude Code or Codex

Open the MCP setup guide, choose your coding assistant and follow its connection steps. You need a Rubiic account and an API token from your account page for the token-based setup. Store credentials in your personal client configuration, outside the application repository and browser code. Then ask for a read-only check:

Use Rubiic to list my projects so I can check the connection. Do not create or render anything yet.

Rubiic does not automatically see your repository or localhost. Have the assistant pass the relevant colors, dimensions, labels and product facts in the brief. Public reference pages or pasted text can supply more context. The connection is for your build workflow; visitors to the finished app just see ordinary images and videos.

Create the logo, then refine one decision at a time

A logo is a useful first asset because it forces a few decisions the rest of the frontend can follow: shape, color, density and tone. For Rubiic, we began with a white cube and colorful details, then asked for a simpler, flat shape. Once that silhouette worked, we changed the blue and purple to red and yellow and reduced the spots to 75% opacity.

01 · Explore

02 · Simplify

03 · Refine

A brief for a similar direction could be:

Use Rubiic to create a simple 2D app mark on a 1200 × 1200 canvas. Use a rounded white block on #111827, with a red capsule and a yellow circle inside. Keep it friendly and legible at small sizes. No perspective, text or shadow. Show a still preview before export.

Then make the revision specific: “Keep the geometry and spacing. Change only the capsule to #EF4444 and the circle to #FACC15, both at 75% opacity.” This gives you a focused change to inspect against the previous version.

Rubiic can help develop and render a logo concept. Its current exports include PNG, JPEG and WebP stills; a native SVG logo package is a separate integration step. For this mark, we reproduced the approved simple geometry in SVG and generated the app icons from that source. The original Rubiic PNG has an opaque background: translucent spots on white do not make the file itself transparent.

Check the mark where people will actually see it

Ask Claude or Codex to place the approved mark in the header, sidebar, sign-in screen and browser icon. Review light and dark surfaces and the smallest sizes before treating the logo as finished. Keep one canonical asset so a later color adjustment reaches every placement.

RubiicHeader

Welcome to Rubiic

Give the hero one thing to explain

The logo identifies the product. A hero animation can show how it works. For the booking app, three beats are enough: choose a service, select a time, see the confirmation.

Use Rubiic to make an eight-second silent hero animation, 1280 × 720 at 30 fps. Show “Choose a service”, “Pick a time” and “Booking confirmed” using a simplified version of our interface. Include the current app's exact colors and labels in the brief. Hold the confirmation for two seconds. Propose the sequence before rendering.

For this post, we used the same approach to illustrate the connection itself: Claude Code or Codex sends a creative task through MCP, Rubiic creates the media, and the assets return to the app. Here is the ten-second composition exported from Rubiic.

Review the sequence, wording and connections as carefully as the colors. A simplified diagram is an explanation, not a screen recording or a trace of real network traffic. Check that someone can follow it at the width of your actual hero.

Fill feature cards and empty states with useful illustrations

Smaller placements often work better as stills. For the booking app, a feature section might explain availability, reminders and confirmations. Give each illustration one subject, a shared palette and enough empty space to sit beside readable HTML copy.

Create three 800 × 600 still compositions in Rubiic for our booking app: a calendar with three available slots, a reminder card beside a clock, and a booking confirmation with a checkmark. Use the approved palette and rounded shapes. Keep backgrounds consistent and leave out headlines; those will be HTML. Preview the set together, then export WebP files.

For an empty state, make the image support the next action. An empty calendar with one highlighted slot can accompany “Create your first booking”. Ask for a calm, uncluttered composition. Claude or Codex should build the real button, instructions and focus behavior.

Make a 640 × 480 illustration for the empty bookings screen. Show a simple calendar and one welcoming highlight in our accent color. Avoid text, sample customer names and fake notifications. Match the page background and export a PNG for review in the frontend.

Rubiic can also generate images within its compositions when a more illustrative treatment helps. Keep the approved logo as a reference and inspect every result for consistency; brand instructions guide generation but do not enforce an identical look.

Reuse the composition for posters, GIFs and launch assets

A single approved composition can serve several placements. Our connection animation produced an MP4, a WebP poster and a GIF. The still can accompany an article or feature card; the MP4 gives the full motion; the GIF suits a surface that accepts looping images.

For a launch, brief a separate square or portrait composition with the same visual direction. Recompose the layout for its destination so text and important details stay visible. A blog export is not automatically suitable for an ad placement.

Use our approved visual direction to create a 1200 × 1200 launch graphic. Show the booking confirmation as the main subject, keep the logo clear and use the headline “A simpler way to book”. Make a separate portrait layout if needed. Show both compositions before export.

Review, export and integrate the actual files

Creation and delivery are separate steps. Your assistant starts a Rubiic task, checks its progress and relays review questions. Give feedback while the task is waiting for input. If it has already finished, request revisions in the existing Rubiic project; MCP's current agent_update answers pending questions rather than reopening completed tasks. Our logo refinements used that browser continuation.

After approval, the assistant retrieves the saved scene with get_project, uses start_render for MP4 or start_export for stills and GIFs, checks the job status, and requests a download URL. Generation and paid exports consume credits, so specify the files you need before rendering every variation.

Download the approved files and store them at stable paths in the app or our media host. Add the hero MP4 with its poster, visible controls, inline playback and preload set to none. Reserve the image and video dimensions. Use descriptive alt text where the image conveys information, and empty alt text for decoration. Check desktop, mobile and reduced motion.

Download links expire; save the bytes rather than putting a temporary URL into the page. Check the file type, dimensions, background and size. For GIFs, Rubiic supports clips up to ten seconds at 320 or 640 px maximum width and 5 or 10 fps. Compare the actual files at their displayed sizes before choosing a format.

Keep motion optional and a useful still visible before playback. Test the real layout, including dark mode, keyboard controls and what remains understandable when the video never plays. Start with the MCP guide and one asset your frontend needs, then use the published examples to judge the outputs.