Detailed tips

​

Phase 1: Planning and getting started

​

Project planning tips

​

Page steps after requirement clarification

1. Looks good — start generating
   • If the page steps match what you want, click Start generating
   • superun continues the flow from those steps
2. Not what you expected, but hard to describe
   • If something feels off but you are not sure how to say it
   • Click Not sure yet
   • The model will offer new options to choose from
3. You have ideas and want changes
   • If you want to adjust the page steps
   • Type your requirements in the chat
   • The model combines your input and regenerates options

💡 Tip: Use requirement clarification fully so later generation matches your intent. If you are not satisfied, pause and refine before moving on.

​

Style selection and theme preview

1. Pick a style
   • Click any generated style to select it
   • Each style represents a different design direction
2. Preview themes
   • Use the theme color picker at the bottom of the page
   • Slide through colors to see how themes look on the selected style
3. Apply a theme
   • Click a theme to select and apply it
   • It applies immediately to the current style
4. Confirm and continue
   • When style and theme both look right
   • Click Continue with this style in the top right
   • superun generates your app with that style and theme

💡 Tip: Explore style and theme combinations. Hover to preview themes so you can decide with confidence.

​

Generate a demo version

1. Click “Got it — start the demo”
   • After styles are ready, click this to generate the demo
   • The demo uses system-generated test data
2. Try the app
   • The demo is a lightweight preview
   • You can switch pages and perform basic actions
   • It shows interaction flow and how the app feels to use
3. Validate design
   • See the app in action
   • Check whether design matches your expectations
   • Confirm flows make sense
4. Review and confirm
   • After the demo is ready, the chat stream will remind you
   • Click View demo → in the top navigation bar
   • Confirm the demo looks right

​

Development phase

1. Next steps after viewing the demo
   • After the demo, choose the features you need
   • Generate demo first builds a richer demo for the features you select
   • Generate demo and development together builds real features with real data and gives you a follow-up feature list
   • Or click Next: development in the navigation bar to go straight to the feature list

2. Choosing features in development
   • Follow the model’s suggested order, or select everything at once
   • Pick only what you need
   • Choose in the chat stream or on the Development tab
   • After you continue, superun implements what you selected

3. Acceptance and continued development
   • When selected features are done, try them and accept or reject
   • If something is wrong, say so in chat and let superun fix it until it matches your expectations
   • When features look good, select remaining items and continue building
   • You can also describe new requirements in chat for superun to implement

4. Route switcher
   • If admin or other standalone routes are not reachable by clicking through the UI
   • Use the route switcher in the middle of the navigation bar
   • Pick a route from the dropdown to jump directly to that page

​

Launch and operations

• Click Next: launch and operations for publishing, search optimization, analytics, performance, and related launch tools
• Everything here ties to going live
• One-click publish
• Search optimization and similar features

💡 Tip: Demos are a fast way to validate design and flow. Before building the full app, use a demo to refine requirements.

​

Save credits: when something breaks, do not rush random fixes

• Errors or freezes—try Auto-fix a few times
• Refreshing does not lose work; the model can be unstable and work may finish before the page updates

1. Understand: Copy the error and ask the AI: “What does this mean, and where might the issue be?”
2. Align on a plan: Discuss possible fixes with the AI
3. Then change: Only after you agree on approach, ask it to modify code

• ❌ Asking the AI to change things randomly at the first error
• ❌ Editing without analysis
• ❌ Many quick fixes that make the problem worse

• ✅ Understand the error message first
• ✅ Find the root cause
• ✅ Agree on a fix plan
• ✅ Then apply changes

​

Roll back using version history

• Recent changes broke functionality
• You want a previous stable version
• Compare versions side by side
• Try a different implementation path

1. Open the project’s version history
2. Review past versions
3. Pick the target version
4. Click Roll back to this version or Restore this version
5. Confirm
6. superun restores that snapshot

• Rollback drops changes between now and the target version
• You can keep building from the restored version
• If the project uses a database, watch for data compatibility

💡 Tip: Stable milestones in version history make rollback fast when you need it.

​

Prompt writing tips

​

Save credits: think in consultation mode, then let AI act

• Discuss ideas
• Nail down structure
• Ask “Does this make sense?”
• Confirm direction and details

• Ask the AI to generate or modify
• Implement what you agreed in consultation
• Keep direction consistent

• Less off-target generation
• Lower credit use (consultation costs less)
• Catch issues early
• Clearer thinking

​

Phase 2: Design

​

Image usage tips

​

Upload images directly in chat

1. Upload from the chat box
2. In your prompt, say where each image goes and how large it should be
3. The AI inserts and adjusts styling

• Product photos
• Brand assets
• Reference designs

💡 Tip: You can upload multiple images—say what each one is for in the prompt.

​

Replace images in the design editor

1. Click Design editor in the top navigation bar
2. Select the image placeholder to replace
3. Choose the new image

• Visual, straightforward
• Instant preview
• No code changes

​

Upload project images to superun storage

1. Create a bucket in superun storage if needed
2. Upload image files
3. Copy the storage path
4. Reference the path in your prompt

• Centralized project assets
• Easier versioning
• Faster loading

Use the image from superun storage: https://1799444268974080-09e640c9337540adac62ea19f57a7f65.uxa-cdn.com/wmmgnele36.png as the homepage hero

​

UI design tips

​

Quick style tweaks in the design editor

• Text content and style
• Colors and backgrounds
• Fonts and sizes
• Spacing and layout
• Responsive settings

1. Click Design editor in the top navigation bar
2. Select an element
3. Adjust properties
4. Preview immediately

​

Why visual editing helps

• Speed: Direct manipulation, no code
• Safety: Less risk to existing behavior
• Instant preview: See results immediately
• Easy iteration: Tweak until it looks right

• Layout and styling
• Copy changes
• Image swaps
• Responsive polish

​

Limits on mobile

• Browse and view projects
• Pick a style and continue generation
• Basic project navigation

• Design theme editing
• Visual design editor
• Advanced editing

​

Phase 3: Development

​

Automated capabilities

​

Built-in AI models

• Connect AI models to your product without wiring low-level APIs yourself
• No API key setup required
• Ready to use

​

Deploy to the cloud

• Deploy to the cloud without managing servers
• No server environment setup
• One-click publish

​

Automatic media storage

• Images and video stored automatically for use in the site
• Unified asset management
• Automatic optimization

​

Text-to-image (superun image generation)

• Built-in text-to-image tooling
• No external service required
• Generate images quickly

​

Common features configured for you

• Sign-up, login, payments, and similar setup in one flow
• Less repetitive work
• Faster time to launch

​

Dynamic variable nodes

• Tell the AI the values or logic you want; it updates the node
• To change something, say in chat: “Set node X’s value to …”

• ❌ Double-clicking to type manually → does not work
• ✅ Describe changes in chat → updates apply automatically

​

Knowledge base tips

​

Custom knowledge for project context

• Product vision: Core value and goals
• User journey: End-to-end usage
• Core features: Main modules and capabilities
• Design rules: Standards and constraints

• The AI keeps referencing this context
• More consistent output
• Better accuracy

​

Roles and boundaries

• Role types: Admin, standard user, guest, etc.
• Permission boundaries: What each role can access
• Data isolation: What data each role sees

Role definitions:
- Admin: all features including user management and system settings
- Standard user: profile and orders
- Guest: public content only

​

Generate a project knowledge base

Based on what is already built, generate a knowledge base for my project.
Include positioning, core features, user roles, and design standards.

• Project overview
• Feature list
• Role definitions
• Design standards
• Technical architecture

​

Save patterns that work and reuse them

• Wording that works well
• Structures the AI understands reliably
• Steps that rarely fail

• Keep them for next time
• Add to the project knowledge base
• Turn into prompt templates
• Store in custom knowledge

• Higher efficiency
• Consistency
• Fewer mistakes
• Reuse what already worked

💡 Tip: Periodically refine these patterns into your own best-practice library.

​

Prompt optimization tips

​

Point to a specific page or module

On the settings page (/settings), in the notification section, add an email notifications toggle.

• Page path
• Location (section, module)
• Desired behavior

​

Database integration tips

​

Version management tips

​

Pin every good state

• After a major feature or change, the system adds an entry to version history
• Each version is a full project snapshot you can view or restore

1. After a major feature, test that it works
2. The system saves the current state to version history automatically
3. Review milestone entries in version history

• Roll back to any snapshot
• Compare versions
• Progress tracked without manual tagging

💡 Tip: Focus on building—version history is automatic.

​

Rebuild by rolling back to a version

• Structure is too messy to fix incrementally
• Too many errors; fix cost is high
• You want a new approach from a known-good base
• You need a version where features worked

1. Open version history
2. Find a stable version where features worked
3. Select it
4. Click Restore this version
5. Confirm rollback
6. superun restores that state
7. Continue development from there

• ⚠️ Important: Rollback removes all changes after the target version—proceed carefully
• With a connected database, check data compatibility before rollback
• You can keep editing after rollback

⚠️ Note: Check database compatibility before rolling back.

​

Email configuration (as needed)

​

Configure email with Resend

1. Sign up at resend.com
2. Verify your email
3. In the Resend dashboard, open API Keys
4. Click Create API key
5. Name it (for example, “superun App”)
6. Copy the key (starts with re_)
7. Keep it secret—never expose it in client-side code

​

Configure SMTP with a personal NetEase mailbox

• Product validation
• Internal notifications
• Testing email

• No business verification required
• Quick setup (about five minutes)
• Low cost

​

Speech engine configuration (as needed)

• Baidu AI Cloud
• iFLYTEK Open Platform
• Volcano Engine
• Alibaba Cloud

​

WeChat H5 voice input limits

1. Configure JS-SDK trusted domains in the Official Account backend
2. In your superun project, integrate WeChat JS-SDK (wx.startRecord / wx.stopRecord)
3. After recording, upload to WeChat servers, then convert to text or files as needed

⚠️ Note: This applies to WeChat H5 (Official Account web pages) only—not desktop browsers or WeChat Mini Programs.

​

Developer tool tips

​

html2canvas element alignment issues

const exportElement = async () => {
  // 1. Inject fix styles
  const style = document.createElement('style');
  style.id = 'export-fix-style';
  document.head.appendChild(style);
  
  if (style.sheet) {
    style.sheet.insertRule('* { box-sizing: border-box !important; }', 0);
    style.sheet.insertRule('img { display: inline-block !important; }', 1);
    style.sheet.insertRule('div { box-sizing: border-box !important; line-height: 1.2 !important; }', 2);
    style.sheet.insertRule('span { line-height: 1.2 !important; }', 3);
  }
  
  try {
    // 2. Wait for assets (images + fonts)
    await Promise.all([
      ...document.images.map(img => 
        img.complete ? Promise.resolve() : new Promise(resolve => {
          img.onload = img.onerror = resolve;
        })
      ),
      document.fonts.ready // Wait for fonts
    ]);
    
    // 3. Capture (see key options below)
    const canvas = await html2canvas(element, {
      scale: 3, // High-DPI scale
      foreignObjectRendering: false, // Prefer classic rendering for stability
      useCORS: true, // Cross-origin images
      allowTaint: true // Works with useCORS for cross-origin
    });
    
    return canvas.toDataURL('image/png', 1.0);
  } finally {
    // 4. Remove temporary styles even on error
    document.getElementById('export-fix-style')?.remove();
  }
};

1. Consistency: Use the same options for single export, batch export, and similar flows.
2. Wait long enough: After DOM or style changes, wait at least 1000ms before capture so layout settles.
3. Clean up: Use try...finally so export-fix-style is always removed.
4. Test broadly: Single export, batch export, and complex layouts (images, text, nesting).

​

Phase 4: Launch

​

Phase 5: Troubleshooting

​

Data issues

​

Unexpected data rollback

• Separate admin for data: Decouple data management from model logic
• Let the model update data directly: Keep mutations on a single path

• Use version history for important states
• Back up data regularly
• Implement durable persistence

​

Let the model modify data directly

• Less drift
• Lower error rate
• Simpler data flow

• Model writes directly to the database
• Avoid multi-layer transforms
• One clear entry point for changes

​

API errors

​

Debugging AI feature errors

• Headers breaking body serialization
• Content-Type mismatch
• Wrong payload format

1. Inspect request headers on the API call
2. Ask the AI to find redundant headers
3. Align headers with body serialization
4. Remove unnecessary header config

​

Match Content-Type correctly

• Correct Content-Type
• Body format matches
• Encoding is consistent

• JSON body with text/plain
• Form data with application/json
• Encoding mismatch

​

Credits issues

​

Session errors after topping up credits

1. Logs: Confirm the error after top-up
2. Auto-fix: Use Auto-fix in superun (Auto-fix button) to clear bad state
3. Retest: Confirm the session continues normally

• Check account state before topping up
• Wait a few seconds after top-up for sync

​

How to save credits

• Simple edits cost too many credits
• Repeat fixes burn credits

1. Manual edit: Style tweaks via Manual edit (zero credits)
2. Consultation mode: Plan in consultation mode (free)
3. Auto-fix: Try Auto-fix first when something breaks (free)
4. Invite users: Invite new users who complete the demo for a 20-credit reward
5. Stop early: When something is wrong, pause—do not keep spending on a bad path

• ❌ Change styles in chat: uses credits
• ✅ Manual edit for styles: zero credits
• ❌ Run features directly: uses credits
• ✅ Plan in consultation: free
• ❌ Manual debugging in chat: uses credits
• ✅ Auto-fix: free

• Consultation mode: Phase 1: Save credits: think in consultation mode, then let AI act

​

Version rollback and demo state

​

Cannot interact after rolling back history

• After rollback from history, the page does not respond to clicks
• The right-side feature menu disappears
• Nothing is clickable

1. Check if you are on a demo: Demos are read-only. If you rolled back to a demo snapshot, continue into the development build
2. Version history: If rollback caused issues, roll back again to an earlier stable version

⚠️ Note: To work on a project after rolling back to a demo snapshot, continue generating the development version.

• Basic rollback: Phase 1: Roll back using version history
• Rebuild from a version: Phase 3: Rebuild by rolling back to a version

​

Chat and input issues

​

Input disabled or send button grayed out

• Cannot type in the input
• Send button is gray and not clickable
• Toast says insufficient credits when sending

• You can usually still type when credits are low
• Sending shows a “Insufficient credits” toast
• Fix: Top up credits, then send again

1. Finish the initial demo: Early-stage projects may need Generate demo checked and completed before chat edits
2. Consultation in progress: An active consultation grays out send—wait for it to finish before main-flow instructions

Case 1: Insufficient credits
1. Check credit balance (top right)
2. Top up if needed, then send

Case 2: Cannot type or send is gray
1. If demo is not done, click "Generate demo"
2. Wait for demo completion, then chat normally
3. If it persists, clear browser cache and retry

​

Preview issues

​

Preview keeps loading or will not show

• Preview spinner never finishes
• Style stage preview pane empty on the right
• Preview fails but the published URL works

1. Refresh: Clear cache and hard-refresh the whole browser tab (not in-app refresh only)
2. Network: Try another network
3. New tab: Open the preview URL in a new tab
4. PWA: Older projects may hit PWA issues
   • In consultation, ask: “My preview will not load—is PWA the cause?”
   • If yes, ask in main flow to “Remove PWA support”
5. Network test: Visit https://net-test.superun.app/
6. Wait for jobs: If a task is running, wait until it finishes, then preview again

1. Ctrl+Shift+Delete to clear browser cache
2. Close the browser and reopen the project
3. Try another network if needed
4. Open preview in a new tab
5. For older projects, confirm PWA in consultation before removing PWA

​

Login issues

​

Admin entry and role-based redirects

1. Open the project and use the client switcher (top right—dropdown or “Switch client”)
2. Choose Admin or Admin console
3. Sign in with an admin account

• Confirm the account has the admin role
• Go to Development → Database → users (or your roles table), set role to admin for that user (field names vary by project)
• Or ask in consultation: “How do I grant admin to a user in this project?”

• On the Development page, click + and open Cloud tabs
• Ask in consultation: “How many clients does my project have? What is the admin path?”

​

Login button does nothing

• Login button has no effect
• Blank page after login
• Multiple admin consoles cannot log in

1. Use Auto-fix: Click the in-product Auto-fix entry and describe the dead login button
2. Add detail if needed:
   The login button does nothing. Check click handlers, auth config, callback URLs, network requests, and console errors, and fix anything confirmed broken.
   
3. Browser: Try Chrome or another browser
4. Cache: Clear cache and sign in again
5. Providers: Confirm enabled login methods (email, phone, Google) under Build → Services → superun Cloud → Authentication

1. Click the in-product Auto-fix entry
2. Describe the login button issue and wait for diagnosis
3. If needed, send the full prompt above
4. Apply fixes from the result
5. Refresh and test
6. Check Authentication settings for enabled login methods

​

Image upload issues

​

Image upload fails

• All admin image uploads fail
• Images do not display after upload

1. Storage: Confirm superun storage is configured
   • Development → Services → superun file storage
   • Ensure storage is enabled
2. Workaround: Upload to superun file storage and paste the URL in chat
3. Auto-fix: Run Auto-fix to repair upload flows
4. Reconfigure: Ask in chat to reconfigure image upload

• See Phase 2: Image usage tips
• Chat upload, design editor replace, superun storage

​

Page display issues

​

Blank page or content covered

• Blank page
• Content hidden behind other elements
• Missing buttons

1. Auto-fix first
2. Rollback if Auto-fix does not help
3. Layout: In consultation, ask:
   My page looks wrong / content is covered. What might cause this? Should we use a three-part layout (header / selector / content)?
   
   • Follow the AI’s advice before changing layout in main flow
4. Refresh after fixes
5. Console: F12 → copy errors into chat for targeted fixes

1. Click Auto-fix
2. Roll back if still broken
3. Use consultation to confirm cause and layout plan
4. Apply layout changes only if recommended
5. Refresh and test

​

Repeated failed fixes

​

Feature breaks again after a fix

• Fix works briefly then breaks again
• Same issue after many attempts
• High credit spend

1. Rollback to a working version and try a different approach
2. Consultation to plan before executing
3. Avoid loops—do not keep asking the same fix in chat
4. Complex UI (e.g. poster editors): prefer superun image generation and similar tools
5. Stop the thread if the AI is stuck in a loop and start fresh

1. Understand: Copy errors and ask what they mean
2. Plan: Discuss fixes with the AI
3. Change: Apply only after you agree

💡 Tip: Models can spiral after an early mistake—stop early and change approach.

​

Domain binding and SEO

​

Domain binding fails

• GoDaddy apex domain cannot bind CNAME directly
• Domain resolves but redirects to the superun homepage

1. Cloudflare: Point nameservers to Cloudflare, then bind in superun
   • Update nameservers at your registrar
   • Bind via Cloudflare in superun
2. Ask the AI: In consultation:
   After binding my domain it redirects to the superun homepage. Why, and what config should change?
   
   • Confirm the correct domain before asking for config changes in main flow

1. Point nameservers to Cloudflare at your registrar
2. Bind the domain in superun via Cloudflare
3. Wait for DNS (minutes to hours)

​

Fonts and styling

​

Cannot change numeric fonts via chat

• Numbers will not change font through chat alone
• Text and images feel mismatched

1. Select element and edit: Use Select element and edit, pick the element, then describe the change
2. Upload fonts: Upload a .ttf and ask the AI to apply it to specific elements
3. Manual edit for pure styling
4. Reference image: Upload a reference for the AI to match

1. Click Select element and edit (cursor icon)
2. Pick the element on the canvas
3. Describe the change in chat
4. Or upload a font file and ask the AI to use it

​

Sound playback

​

Unreliable sound effects

• Sound sometimes plays, sometimes not
• Inconsistent playback

1. Re-upload the audio file
2. Caching: In consultation, ask:
   Sound effects are inconsistent. Could caching or preloading help?
   
   • If yes, ask for preload/cache in main flow
3. Auto-fix the playback logic
4. Format: Prefer MP3 or WAV

1. Re-upload the file
2. Use consultation to decide on preload/cache
3. Implement cache if recommended
4. Auto-fix playback logic
5. Test playback

​

After consultation, unsure how to implement

• Nothing changed after talking with Su Xiaoqiang in consultation
• Unclear how to turn discussion into edits

1. Talk only — consultation with Su Xiaoqiang does not edit or regenerate the project
2. Main flow executes — switch back to main input, describe changes, and send
3. Free — consultation does not use credits

• Send is gray while a consultation is active
• Wait for it to finish

1. Click Free consultation (bottom right of input)
2. Discuss with Su Xiaoqiang (reference images / docs OK)
3. Switch back to main flow input
4. Describe changes and send to execute

• Phase 1: Save credits: think in consultation mode, then let AI act
• Meet Su Xiaoqiang for proactive tips and recommendations

​

Payments

​

Slow WeChat Pay security check

• WeChat Pay security check is very slow

1. Clear cache and retry
2. Wait — security checks can take time
3. Stable network

1. Clear browser cache
2. Reopen the payment page
3. Use a stable network

​

File upload and replace

​

Cannot replace images

• Cannot replace images on the page
• Uploaded files are unusable

1. Select element and edit: Select the image and provide a new URL in chat
2. superun file storage: Upload there, copy link, use in chat
   • Development → Services → superun file storage
3. Design editor: Design editor in the top bar—right-click layers if selection is hard
4. Describe in chat: Annotate a screenshot and describe the swap

• Phase 2: Image usage tips
• Phase 2: Upload project images to superun storage

​

System update failures

​

“System error” when updating

• Update shows “System error” or fails

1. Network: Wait and retry
2. Busy: Wait if another task is running
3. Already latest: No Update button when you are on the latest version
4. Auto-fix
5. Refresh and retry update

1. Check for in-progress tasks
2. Retry after tasks finish
3. Skip update if already on latest
4. Run Auto-fix
5. Refresh and retry

​

Mobile adaptation

​

Mobile display problems

• Broken layout on mobile
• Poor adaptation

1. Consultation:
   Mobile layout looks wrong. What might be wrong and how should we optimize?
   
   • Confirm plan, then ask for responsive design in main flow
2. Browser: Use modern mobile browsers (Chrome, Safari, etc.)

• Responsive design: screen sizes, touch, layout and typography
• PWA: add to home screen, offline, app-like feel, push (where supported)

​

Network errors and stuck tasks

​

“Network error” toasts

• Frequent “Network error”
• Task stuck on “Reading console logs”

1. Wait — high load often clears in a minute or two
2. Test: https://net-test.superun.app/
3. Switch network (e.g. phone hotspot)
4. Refresh
5. Clear cache

1. Wait 1–2 minutes
2. Run network test
3. Switch network if needed
4. Clear cache and retry

​

Deployment

​

superun builds web apps

• Output is a web application
• No direct native app generation
• Use responsive design for mobile

• Responsive design
• Progressive Web App (PWA)
• Hybrid wrappers if you add them later

​

Admin console deployment

• Admin pages and routes live in the same deploy as the main app
• Same domain; paths like /admin or /dashboard separate admin

• Authentication on admin routes
• Roles: admin vs standard users
• Route guards for sensitive paths
• Data scope: admin sees only authorized data

1. Ask superun to generate the admin system (routes + pages)
2. Configure auth and permissions
3. Test that only authorized users reach admin

💡 Tip: Admin is part of one deployment—permissions matter more than a second host.

​

Optimize the mobile experience

• Adapt to screen sizes
• Touch-friendly interactions
• Layout and typography tuned for small screens

• Add to home screen
• Offline support
• App-like experience
• Push notifications (where supported)

​

General troubleshooting flow

​

Standard steps when something goes wrong

• Copy error messages
• Ask the AI what they mean and where to look
• Do not ask for random fixes at first sight of an error

• Click Auto-fix
• Fixes common issues automatically
• Free—no credits

• If Auto-fix is not enough, use consultation
• Agree on a plan, then execute in main flow

• For deep issues, restore a known-good version
• Try a different fix path
• Avoid error spirals

• Check connectivity
• Clear browser cache
• Try another browser

💡 Tip: Understand first, then fix. Auto-fix is free—try it early. Most issues yield to Auto-fix, consultation, rollback, and cache clears.