Skip to main content
Artifacts

Creating web pages

Written By Stanislas

Last updated 16 days ago

Overview

Web pages in Artifacts let you create responsive web applications, landing pages, and interactive dashboards without writing code manually. You describe the functionality, structure, and aesthetic, and Swiftask builds the code and renders a live preview.

Use this feature to prototype applications, publish customer-facing landing pages, or assemble internal team dashboards. You can customize code and styles with conversational feedback or direct manual adjustments.

Prerequisites

Before building web pages, ensure you have:

  • An active Swiftask account.

  • Access to a workspace.

  • The Artifacts feature enabled (available on all workspace plans).

Step-by-step guide

1. Open the Artifacts section

Click Artifacts in the left navigation sidebar.

2. Click Create new web page

Click the Create new web page button at the top of the Artifacts dashboard.

3. Select an AI agent

In the configuration modal:

  1. Choose your AI assistant from the Artifact assistant dropdown menu.

  2. (Optional) Check Set this assistant as default to automatically select this assistant for your next artifacts.

  3. Click Create artifact.

Select an AI agent modal

4. Inspect the live preview

Swiftask generates the application code and renders the page in the right-hand panel. You can interact with buttons, forms, and responsive elements directly in the preview window.

5. Modify and refine

  • Prompt-based iteration: Submit instructions in the chat panel to add new sections, modify responsive behavior, or update color schemes.

  • Manual adjustments: Click the edit icon (pencil) to edit text strings, tweak inline styles, or rearrange components without triggering an AI regeneration.

6. Share, publish, and manage your web page

Use the top toolbar in the preview window to manage, inspect, and share your live web page:

Web page preview toolbar

  • Share: Opens the collaboration modal to search workspace members, assign access permissions (User, Admin, Owner), or generate a public link.

  • Expand: Toggles between the split-screen chat view and a full-width preview of the web page.

  • Refresh: Reloads the web page preview to verify recent updates or reset interactive forms and elements.

  • Open in new tab: Launches the web page in a separate browser tab to test responsiveness, styling, and navigation in an isolated window.

  • Copy link: Copies the direct web page URL to your clipboard for quick sharing with teammates.

  • Copy code: Copies the complete generated HTML, CSS, and JavaScript source code to your clipboard.

  • Edit: Enters manual inline editing mode so you can modify text, styles, or layout blocks directly without prompting the AI.

From your Artifacts library, click the three dots icon (⋮) on any web page card to access card management actions:

Web page card context menu

  • Duplicate: Creates an immediate clone of the web page artifact, allowing you to test new layouts or maintain a backup before major edits.

  • Rename: Changes the display title of the web page artifact in your workspace.

  • Update: Reopens the conversational chat session to continue modifying and refining the web page with the AI assistant.

  • Assigned to a collection: Organizes and files the web page artifact inside a dedicated workspace collection.

  • Share: Opens the sharing modal to invite team members and adjust permissions.

  • Delete: Permanently removes the web page artifact from your workspace.

Practical use cases

  • Product launch landing pages: Build a single-page showcase with hero copy, product benefit cards, testimonials, and call-to-action buttons.

  • Internal metric dashboards: Create a visual reporting dashboard containing data tables, summary cards, and filter components.

  • Lead generation forms: Deploy a standalone contact and feedback collection page for prospective clients or webinar registrants.

Tips & best practices

  • List specific sections (Header, Hero, Feature Cards, Footer) in your prompt to ensure a well-structured layout.

  • Test interactive elements such as accordions, forms, and navigation buttons in the live preview before sharing.

  • Duplicate an existing web page artifact before applying major structural redesigns.

Troubleshooting

  • Page preview does not load: Ensure your browser is not blocking inline frame scripts, or prompt the AI to regenerate the basic markup.

  • Styling inconsistencies on mobile: Request the AI agent to optimize responsive breakpoints for mobile and tablet displays.

Additional resources

Was this helpful?

Still need help? Ask the team