Design

Visily Prompts

10 ready-to-use prompts

Researched for Visily real features. Replace the [BRACKETED] parts with your own details, copy, and paste.

1Text-to-Design brief for a full app concept
Act as a product designer writing a Text-to-Design prompt for Visily. Describe a [APP_TYPE] for [TARGET_USER] solving [PROBLEM], with these core screens: [SCREEN_LIST]. For each screen list the sections, components, and primary actions. Specify style direction: [STYLE_KEYWORDS] and [COLOR_PREFERENCE]. Keep the brief under the free tier's AI credit budget in mind by making it one complete pass, then list 3 follow-up refinements I can request with remaining credits. Target audience: non-designers on a startup team.
Tip: Write one complete brief per generation to save your 300 free monthly AI credits.
2Screenshot-to-Design redesign playbook
You are a UX lead. I will upload a screenshot of [SOURCE_APP]'s [SCREEN_TYPE] into Visily's Screenshot-to-Design, which converts it into editable wireframes. Before I upload, analyze what to fix for a [INDUSTRY] product serving [AUDIENCE]: list layout issues, confusing flows, and weak CTAs. Then write a redesign brief for the editable output covering: new information hierarchy, revised copy for [KEY_SECTIONS], and accessibility fixes: [A11Y_NOTES]. Include how to use Auto-Prototyping to link the redesigned screens into a clickable flow.
Tip: Write the redesign brief before uploading so you transform the scanned wireframe in one pass.
3Sketch-to-Design workshop digitization
You are a product manager running a design workshop for [TEAM_NAME]. Teams hand-drew screens for a [PRODUCT_CONCEPT] targeting [AUDIENCE]. Write instructions for converting the hand-drawn photos into editable designs with Visily's Sketch-to-Design: how to photograph sketches, how to describe each screen's elements for the AI: [SCREEN_DESCRIPTIONS], and how to use Magic Themes afterward to unify the look with keywords: [STYLE_KEYWORDS]. End with a QA checklist for the digitized screens before presenting to [STAKEHOLDER].
Tip: Photograph sketches in bright, even light so the sketch conversion detects clean shapes.
4Magic Themes brand extraction from a reference site
Act as a brand designer. I want to extract a visual theme from [REFERENCE_URL] using Visily's Magic Themes and apply it to wireframes for [PROJECT_NAME] in the [INDUSTRY] industry. First describe the reference site's color palette, typography, button and card styles in a theme brief. Then adapt it for [AUDIENCE]: what to keep, what to change for [BRAND_FEEL], and a contrast/accessibility check list: [A11Y_CHECKS]. Include Design Instructions wording I can save in Visily so every future AI generation stays consistent.
Tip: Save the theme as Design Instructions so every future generation matches your brand.
5Realistic prototype content with Magic Content
Act as a content designer. I have Visily wireframes for a [APP_TYPE] serving [AUDIENCE] and need realistic content via Magic Content and Structured Data Fill. For these screens: [SCREEN_LIST], write real headlines, product descriptions, and user names that fit [INDUSTRY] and tone: [TONE]. Define structured datasets for [DATA_TABLES] (columns and sample rows) so Data Fill populates tables, cards, and lists realistically. Flag placeholder areas where I should upload my own images using Magic Images.
Tip: Define real column names for Data Fill so tables populate with believable, on-topic data.
6Text to Diagram user flow for onboarding
You are a UX designer documenting flows. Write a Text to Diagram input for Visily describing the onboarding flow of a [APP_TYPE] for [USER_TYPE]: entry points: [ENTRY_POINTS], steps in order: [FLOW_STEPS], decision branches: [BRANCHES], and error or drop-off paths: [EDGE_CASES]. Specify whether you want a flowchart or mind map, and how to annotate screens that already exist as wireframes. Then explain how to turn the diagram into clickable Auto-Prototyping links between the matching screens.
Tip: Match diagram node names to your screen names so prototyping links connect instantly.
7Deep Design polish pass for a key screen
Act as a visual designer. I have a wireframe of the [SCREEN_NAME] screen for [PRODUCT_NAME] targeting [AUDIENCE]. Write a Deep Design mode refinement brief: upgraded visual hierarchy for [KEY_ELEMENTS], refined spacing and alignment rules, elevation and shadow treatment, a modern treatment of [COMPONENT_TYPES], and micro-interaction suggestions for the clickable prototype. Style reference: [STYLE_REFERENCE]. Keep all changes compatible with a later Design-to-code export on a Pro or Business plan, noting which effects may not translate to code.
Tip: List which visual effects export cleanly to code so developers get a realistic handoff.
8Plan Mode ideation for a new feature
You are a product lead ideating with Visily's Plan Mode. We are adding [FEATURE_NAME] to a [APP_TYPE] used by [AUDIENCE]. Write a structured ideation brief: user problem: [PROBLEM], success metric: [METRIC], 3 design directions to explore: [DIRECTIONS], constraints: [CONSTRAINTS], and screens affected: [AFFECTED_SCREENS]. Then outline how to move the winning direction from Plan Mode into Text-to-Design generation, and which of the 1500+ templates to start from: [TEMPLATE_TYPE].
Tip: Start ideation in Plan Mode, then generate only the winning direction to conserve credits.
9Clickable user testing prototype from wireframes
You are a UX researcher preparing a usability test. I have Visily wireframes for a [APP_TYPE]: screens: [SCREEN_LIST]. Write the Auto-Prototyping connection map: every clickable element, its target screen, and the expected task path for test scenario: [TEST_TASK] with [PARTICIPANT_TYPE] participants. Include 5 task questions, success criteria: [SUCCESS_CRITERIA], and which Figma import or export steps I need if stakeholders review in Figma afterward. Keep the flow simple enough for first-click testing.
Tip: Define the test task before linking screens so the prototype matches the research plan.
10Design-to-code handoff for a developer team
Act as a design ops lead on a Visily Pro or Business plan. Write the handoff package for developers implementing [PROJECT_NAME] for [AUDIENCE]: what Design-to-code exports cleanly (layouts, styles, assets), what needs manual rebuild: [MANUAL_ITEMS], component naming conventions: [NAMING_CONVENTION], responsive behavior per breakpoint: [BREAKPOINTS], and how to sync changes via Figma import/export when designs iterate. Include a checklist developers run before marking each screen done, tied to acceptance criteria: [ACCEPTANCE_CRITERIA].
Tip: Separate auto-exported code from manual rebuilds so developers know the real scope.
Back to all 214 platforms