UI designer
Prompt
# TASK: Design a Practical AI-Assisted 2D Character Animation Pipeline in Rive ## Your role Act as the **ASSIGNED SPECIALIST ROLE** in a coordinated workflow for preparing, animating and integrating a stylised 2D character into an interactive mobile interface. Your responsibility is to solve your assigned part of the workflow thoroughly, while identifying dependencies, risks and handoff requirements for the other specialists. Do not attempt to take ownership of every task when another specialist is responsible for it. ## 1. Project context I have a polished, stylised character illustration in high-resolution PNG format. I can generate additional illustrations and use Vectorizer.ai to convert raster images into SVGs. I am experimenting with Rive as the environment for preparing, rigging, animating and integrating the character. The final goal is a visually polished character that performs a small set of expressive, interactive micro-animations in a mobile interface. I am not trying to build a complex game character or a universal animation system capable of arbitrary full-body movement. The character should feel expressive, attentive, playful and natural. The original design, proportions, face, silhouette, distinctive details and illustration quality should be preserved. ## 2. What has gone wrong so far I have explored automated PNG-to-SVG conversion and AI-assisted animation preparation. These experiments have exposed several problems: - Vectorisation creates shapes and paths, but they do not necessarily correspond to meaningful body parts. - An SVG can look visually correct while having a hierarchy that is difficult to animate sensibly. - Moving the complete illustration can make the character slide or bob across the screen when the intended behaviour requires a gesture, gaze shift or change in posture. - Separating the artwork into arbitrary pieces can damage the silhouette, create visible gaps, expose missing regions or make the character look as though it has been cut apart. - Creating multiple illustrations of the same character does not automatically make them interchangeable, smoothly morphable or compatible with a shared rig. - An AI agent claiming that it has created an animation does not establish that the intended movement actually works or that the character's appearance remains intact. I want to establish a reliable process instead of repeatedly applying transformations or segmentation to artwork that was not prepared for animation. ## 3. The intended scope of animation The initial animation library should consist of short, purposeful interactions rather than complex locomotion. Consider these examples: **A. Character interacting with a UI button:** The character may lean against or rest on a button, position its arms along the edges, slide its hands a short distance, look between the button and the user, point towards the button and perform a playful finger-wag gesture. **B. Character during a brief breathing pause:** The character settles into a meditative pose, closes its eyes and performs subtle breathing or posture movements. The animation should feel calm, not mechanically repetitive. **C. Character accompanying an on-screen reminder:** The character appears in response to an interface event and performs a relevant gesture, such as pointing towards its temple or tapping its head. **D. Character during a longer waiting interval:** It may occasionally glance at a timer, shift its gaze, stretch, fidget subtly or react to a change of state. The activity should be restrained, contextually appropriate and non-disruptive. These are rough behavioural ideas, not fixed storyboards. Refine them when there is a clear visual or interaction benefit. Do not assume that every example requires a rig, mesh deformation or frame-by-frame animation. ## 4. Technical boundaries and design principles Evaluate the following approaches as appropriate to the assigned role: - Keeping artwork as a PNG or other raster asset. - Vectorising selected artwork and restructuring the SVG. - Separating selected components while reconstructing necessary hidden regions. - Using Rive bones, meshes, weights, constraints or inverse kinematics where useful. - Creating alternative poses or expressions and replacing them during animation. - Creating short frame-by-frame sequences. - Combining a rig with hand-designed poses or other animation techniques. - Connecting the finished animations to Rive timelines, state machines, inputs, listeners and the surrounding application's logic, as applicable. Do not assume that any particular technique is inherently superior. Choose based on the intended movement, visual fidelity, implementation complexity, reusability and runtime requirements. Path-point correspondence matters when corresponding vector paths must morph into each other. Do not treat it as a universal requirement for every SVG, pose sequence or rig. Distinguish between what can be done inside Rive, what requires preparing the source artwork in another tool and what must be handled by the host application's code. The character's visual animation must never activate a UI button by itself, obstruct its interaction area, or prevent the user from acting. Animation and functional UI behaviour must remain distinct. ## 5. Resource and implementation constraints Prioritise a workflow that can be validated incrementally using the existing artwork and Rive editor. Avoid recommending a paid upgrade unless a specific, verified capability or export requirement makes it necessary. AI tools and coding agents may help with analysis, asset generation, reconstruction, scripting and implementation. However, do not assume that these tasks can all be automated reliably in one step. If you recommend a tool capability, file operation, Rive feature or automation method, distinguish verified functionality from assumptions. Do not claim that you have inspected or modified an asset or project unless you actually have. ## Your assignment Complete the specialist role assigned to you using the same context and answer guidance supplied for the other specialists. Provide a concrete, technically grounded deliverable that can be handed to the next specialist without requiring them to reinterpret the original goal. Make reasonable assumptions where details are missing, state consequential uncertainties, and avoid unnecessary complexity. The overall objective is to establish a reliable way to create visually convincing, state-driven character micro-animations while preserving the original artwork and maintaining predictable mobile UI behaviour.
Answer guidance
# ANSWER GUIDANCE: Technical Accuracy, Practicality and Handoff Quality Follow these requirements when completing your assigned specialist role. ## 1. Work from the actual requirements Base recommendations on the described micro-animations, current asset limitations and interactive UI requirements. Do not expand the task into full-body locomotion, 3D conversion or a universal character rig without a demonstrated need. Distinguish established technical facts, your recommendations and assumptions. Challenge incorrect premises rather than agreeing automatically. ## 2. Make decisions explicit For each important decision, state: - The problem being solved. - The recommended approach. - Why that approach is preferable to the plausible alternatives. - What assets, structure or implementation it requires. - Its trade-offs and failure risks. - How the result should be verified. Where multiple solutions are plausible, compare them briefly and make a clear recommendation. Avoid listing techniques without explaining when to use them. ## 3. Ground technical recommendations in real tool capabilities Do not invent Rive editor features, menu items, APIs, MCP operations, file formats or automation capabilities. Where the correct method depends on the Rive editor version, runtime or plan, identify that dependency and verify it where possible. Distinguish among: - What can be prepared in an external illustration or vector editor. - What can be constructed or animated inside Rive. - What belongs in the host application's code. - What an AI agent can realistically automate. - What still requires direct visual inspection or manual correction. Do not claim work has been executed, tested or visually verified unless it actually has. ## 4. Protect the character artwork Any preparation or animation process must preserve the character's recognisable identity, proportions, silhouette, expression, colours and distinctive details. Do not equate successful segmentation with animation readiness. Explain how the workflow will prevent or detect gaps, exposed missing regions, detached edges, broken overlaps, distorted features, inconsistent poses and incorrect draw order. Recommend non-destructive preparation and backups before risky transformations. Do not modify or discard the only good source illustration. ## 5. Design for the intended movement Describe motion in terms of meaningful poses, movement beats, timing, easing and transitions. Identify what should move, what should remain anchored, and which changes require new artwork rather than geometric transformations. Avoid creating a skeleton simply because the character is illustrated. Equally, avoid forcing all movements into a single flattened image when selected components need independent control. Ensure persistent loops and one-shot gestures have defined entry, playback and exit behaviour. ## 6. Make the result testable Every major recommendation must have a practical validation method. Include checks appropriate to the assigned role, such as: - Inspecting the asset hierarchy and identifying the actual movable components. - Previewing key poses and intermediate frames. - Confirming that the intended component moves while other components remain appropriately stable. - Checking silhouette continuity, overlaps and visual consistency. - Testing state transitions, rapid inputs, interruption and recovery. - Confirming that the host UI remains responsive and that animation does not invoke an action. - Checking reduced-motion handling where relevant. Do not treat a successful export, API response, state-machine diagram or agent completion message as sufficient evidence of visual or behavioural correctness. ## 7. Produce a handoff-ready deliverable Structure your response around the output expected from your assigned role. Use concise tables, ordered steps, explicit identifiers and concrete acceptance criteria where they improve precision. Clearly identify: - Decisions other specialists must rely on. - Dependencies or prerequisites. - Unresolved questions that materially affect implementation. - What the next specialist should receive. - What would constitute a failure or require revision. Avoid asking a long list of questions before doing useful work. Make reasonable assumptions and label the ones that could change the recommendation. The standard is not merely a plausible technical proposal. It is a specific, verifiable contribution to a coordinated pipeline for high-quality interactive character micro-animations.
Response not available
DeepSeekResponse not available
Google