Guided Tutorials
Create a Vue Component from a Design Brief
Turn a written design brief into a working Vue 3 component with props, events, styling, and accessibility.
What you'll learn
- How to write a design brief that produces a complete component
- How Autohand matches your existing project patterns
- How to review generated props, events, and accessibility
- How to refine a component with follow-up prompts
Before you start
- Autohand Code installed. Run
autohand --versionto verify. See Your First Autohand Session if needed. - A Vue 3 project using Composition API. Created with
npm create vue@latestor Vite.
If you want the component to use your project's existing design tokens or CSS variables, having at least one other component already written gives Autohand patterns to match.
Write a clear design brief
The brief is the prompt. The more precisely you describe the behavior and interface, the less you need to adjust after generation.
A good brief for a component covers these points.
- What the component does. Display tabular data with sorting, pagination, row selection, and text search.
- What props it accepts.
columns: array of column definition objects withkey,label, and optionalsortable.rows: array of data objects.pageSize: number, default 10.loading: boolean, shows a skeleton state.
- What events it emits.
update:selected: emitted when row selection changes, with the array of selected row objects.sort: emitted when a column header is clicked, with{ key, direction }.
- Visual requirements. Striped rows, sticky header, responsive on mobile (horizontal scroll). Support light and dark themes via CSS custom properties.
- Accessibility. Keyboard navigable. Sort buttons have
aria-sort. Checkboxes have accessible labels.
Generate the component
Run Autohand from your project root.
If you have other components in your project, the agent reads them first to match your naming conventions and CSS variable usage.
Review the component
Before integrating it into your app, check the generated component for these things.
Props definition. Open src/components/DataTable.vue and check the defineProps block. Verify the types match what you described.
Emits declaration. Check that the emits match the events you asked for.
Accessibility attributes. Scan the template for aria-sort on the column headers and aria-label on the row selection checkboxes. If these are missing, ask Autohand to add them.
CSS variables. Check the scoped styles section. All color values should use var(--your-variable-name) rather than hardcoded hex values. This is what makes the component theme-compatible.
Integrate into your app
Import the component and try it with sample data to confirm it renders and behaves correctly.
Run the dev server and verify the table renders, sorting responds to header clicks, checkboxes update the selection, and pagination works with more than 10 rows.
Refine with follow-ups
Once the base component works, add features with follow-up prompts in the same session.
Each follow-up reads the component as it currently exists, so changes stay consistent with the structure already in place.
Tip: If the component is growing complex, ask Autohand to extract reusable logic into a composable. For example: autohand "Extract the sort and pagination logic from DataTable.vue into a useDataTable composable."
What you learned
- Wrote a detailed design brief that covers props, events, and accessibility
- Generated a production-ready Vue 3 component that matches project patterns
- Reviewed the component for correct types, emits, and CSS variables
- Refined the component with follow-up prompts for new features